Vue 实例

创建第一个实例

{{}} 被称之为插值表达式。可以用来进行文本插值。

\"\"\"\" 
<!DOCTYPE html>
<html lang="en">
<head>
  <  charset="UTF-8">
  <  name="viewport" content="width=device-width, initial-scale=1.0">
  <  http-equiv="X-UA-Compatible" content="ie=edge">
  < >Vue入门</ >
  <  src="./vue.js"></ >
</head>
<body>
  <div id="root">{{msg}}</div>

  < >
    new Vue({
      el: "#root",
      data: {
        msg: "hello world"
      }
    })
  </ >
</body>
</html>
View Code

JSbin 预览
 

实例、挂载点、模板

实例里，需指定挂载点，模板

 
\"\"

模板指的是挂载点内部的内容：

  • 可以卸载挂载点内部
  • 也可以卸载实例的 template 属性里面
\"\"\"\" 
<  src="./vue.js"></ >
  <div id="root"></div>
  < >
    new Vue({
      el: "#root",
      template: '<h1>hello {{msg}}</h1>',
      data: {
        msg: "world"
      }
    })
  </ >
View Code

JSbin 预览

 

数据展示 事件绑定 方法定义

v-text / v-html

类似于原生JS中的 innerText 与 innerHtml

JSbin 预览

\"\"\"\" 
<  src="./vue.js"></ >
  <div id="root">
    <div v-text="content"></div>
  </div>
  < >
    new Vue({
      el: "#root",
      data: {
        content: "<h1>hello world</h1>"
      }
    })
  </ >
View Code 
\"\"


 

 

JSbin 预览

\"\"\"\" 
<  src="./vue.js"></ >
  <div id="root">
    <div v-html="content"></div>
  </div>
  < >
    new Vue({
      el: "#root",
      data: {
        content: "<h1>hello world</h1>"
      }
    })
  </ >
View Code
\"\"

 

v-on 事件

通过 v-on 给元素绑定事件，事件触发之后执行的方法写在 Vue 实例里面的 methods 方法里，这样方法里面的事件就可以执行了。

\"\"\"\" 
<  src="./vue.js"></ >
<body>
  <div id="root">
    <div v-on:click="handleClick">{{content}}</div>   <!-- 添加v-on:click事件 -->
  </div>
  < >
    new Vue({
      el: "#root",
      data: {
        content: "click me"
      },
      methods: {
        handleClick: function() {
          alert(123)
        }
      }
    })
  </ >
</body>
View Code

JSbin 预览
 

Vue 中的 DOM 改动

在Vuejs中想要改变数据的显示，不要去改变 DOM。直接改变数据即可。当数据发生变化的时候，Vue会自己去改变 DOM。

\"\"\"\" 
<  src="./vue.js"></ >
<body>
  <div id="root">
    <div v-on:click="handleClick">{{content}}</div> 
  </div>
  < >
    new Vue({
      el: "#root",
      data: {
        content: "click me"
      },
      methods: {
        handleClick: function() {
          alert('yes')
          this.content = "clicked"    //改变数据
        }
      }
    })
  </ >
</body>
View Code

JSbin 预览
从这个案例可以看出 Vuejs 不再面向 DOM 进行操作，而是面向数据进行操作。
 

@

v-on: 可以简写成 @，即

\"\"\"\" 
<  src="./vue.js"></ >
<body>
  <div id="root">
    <div @click="handleClick">{{content}}</div> 
  </div>
  < >
    new Vue({
      el: "#root",
      data: {
        content: "click me"
      },
      methods: {
        handleClick: function() {
          alert('yes')
          this.content = "clicked"    //改变数据
        }
      }
    })
  </ >
</body>
View Code

 

属性绑定和双向数据绑定

属性绑定 v-bind:

当鼠标放置到这个div上的时候，会显示出 ，内容是 this is hello world

\"\"\"\" 
<  src="./vue.js"></ >
<body>
  <div id="root">
    <div  ="this is hello world">hello world</div>
  </div>

  < >
    new Vue({
      el: "#root"
    })
  </ >
</body>
View Code

 

我们希望 可变，所以我们在实例里面，去定义一个  。并使用 v-bind:将  与   数据项做一个绑定。 如果想改变内容，只需要改变 的数据就可以了。

\"\"\"\" 
<  src="./vue.js"></ >
<body>
  <div id="root">
    <div v-bind: =" ">hello world</div>     <!-- 使用v-bind:进行绑定 -->
  </div>

  < >
    new Vue({
      el: "#root",
      data: {
         : "this is hello world"
      }
    })
  </ >
</body>
View Code

JSbin 预览

\"\"

 

当使用类似于 v-bind:  的模板指令，相应的=后面的内容就不再是一个字符串，而是一个 JS 的表达式。
即v-bind: =" " 后面的" " 表示实例中 data 里面的  。
 

：

v-bind:可以简写成:，即

\"\"\"\" 
<  src="./vue.js"></ >
<body>
  <div id="root">
    <div : =" ">hello world</div>     <!-- 使用 :  进行绑定 -->
  </div>

  < >
    new Vue({
      el: "#root",
      data: {
         : "this is hello world"
      }
    })
  </ >
</body>
View Code

 

双向数据绑定 v-model

在这个案例中，有一个input标签，使用 :value="content" 数据进行绑定

\"\"\"\" 
<  src="./vue.js"></ >
<body>
  <div id="root">
    <div : =" ">hello world</div>
    <input :value="content"/>
    <div>{{content}}</div>
  </div>

  < >
    new Vue({
      el: "#root",
      data: {
         : "this is hello world",
        content: "this is content"
      }
    })
  </ >
</body>
View Code

 

但是数据并没有发生同步变化，因为如果数据发生改变，下面展示的内容，也会根据输入的内容发生相应的变化。所以这里的改变，仅仅是改变了input标签中的value值，并没有使data中的content发生变化。

 \"\"

 
 

 

所以我们使用 v-model 这个模板指令，进行数据双向绑定。

\"\"\"\" 
<  src="./vue.js"></ >
<body>
  <div id="root">
    <div : =" ">hello world</div>
    <input v-model="content"/>
    <div>{{content}}</div>
  </div>

  < >
    new Vue({
      el: "#root",
      data: {
         : "this is hello world",
        content: "this is content"
      }
    })
  </ >
</body>
View Code

 

JSbin 预览
在input标签中，使用v-model就可以完成双向数据的绑定，效果如下图。

\"\"

 

计算属性和侦听器

计算属性 computed

在这个案例中，使用上面已经提到过的v-model进行双向数据绑定之后，在input标签中输入相应的数据，会把firstName和lastName拼装好了之后在div中一起展现出来。

\"\"\"\" 
<  src="./vue.js"></ >
<body>
  <div id="root">
    姓：<input v-model="firstName"/>
    名：<input v-model="lastName"/>
    <div>{{firstName}}{{lastName}}</div>
  </div>

  < >
    new Vue({
      el: "#root",
      data: {
        firstName: '',
        lastName: ''
      }
    })
  </ >
</body>
View Code

JSbin 预览


我们通过改造，将firstName和lastName糅合成一个变量，取名为fullName。即fullName是通过firstName和lastName计算而成的一个新的变量。遇到这种情况，通过计算属性解决。

在Vue的实例配置对象里面，配置computed对象属性，在里面定义一个fullName函数，返回值是 this.firstName + ' ' + this.lastName

\"\"\"\" 
<  src="./vue.js"></ >
<body>
  <div id="root">
    姓：<input v-model="firstName"/>
    名：<input v-model="lastName"/>
    <div>{{fullName}}</div>
  </div>

  < >
    new Vue({
      el: "#root",
      data: {
        firstName: '',
        lastName: ''
      },
      computed: {  //定义一个computed对象，在里面定义fullName函数
        fullName: function(){
          return this.firstName + ' ' + this.lastName
        }
      }
    })
  </ >
</body>
View Code

JSbin 预览

computed 值的是一个属性，通过其他属性计算而来。优点是 computed 中参与计算的值如果都没有改变，会使用上一次计算得到的缓存结果，不会重新计算。只有参数计算的值发生变化的时候，才会重新计算。
 

侦听器 watch

监听某一个数据的变化，一旦数据发生变化，就可以在侦听器中实现某个业务逻辑。

\"\"\"\" 
<  src="./vue.js"></ >
<body>
  <div id="root">
    姓：<input v-model="firstName"/>
    名：<input v-model="lastName"/>
    <div>{{fullName}}</div>
    <div>{{count}}</div>
  </div>

  < >
    new Vue({
      el: "#root",
      data: {
        firstName: '',
        lastName: '',
        count: 0  //定义变量 count，默认值为 0
      },
      computed: {
        fullName: function(){
          return this.firstName + ' ' + this.lastName
        }
      },
      watch: {  //定义侦听器
        firstName: function(){   //监听 firstName 的变化
          this.count ++
        },
        lastName: function(){   //监听 lastName 的变化
          this.count ++
        }
      }
    })
  </ >
</body>
View Code

JSbin 预览

通过watch的形式进行侦听器的定义。
当对fristName或lastName做任意的变更，count 数值 +1

当然我们也可以只对 fullName 做监听，即针对计算属性做监听。

\"\"\"\" 
<  src="./vue.js"></ >
<body>
  <div id="root">
    姓：<input v-model="firstName"/>
    名：<input v-model="lastName"/>
    <div>{{fullName}}</div>
    <div>{{count}}</div>
  </div>

  < >
    new Vue({
      el: "

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章