前端开发(HTML,CSS,VUE,JS)从入门到精通!第六天(Vue)

一、Vue 框架

1.Vue 框架是响应式的一个前端 JS 框架,使用时需要使用script 标签引入

二、Vue 起步

1. 每个 Vue 的应用都需要通过实例化 Vue 对象来实现,实例化Vue的语法如下:

2. 第一个Vue应用

先安装 Vue.js 插件:

示例:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>demo1</title>

<script src="js/vue.min.js"></script>

</head>

<body>

<div id="vm">

<!--{{内容}}:Vue 的表达式,用于显示 Vue 对象的属性或方法的返回值-->

<p>{{msg}}</p>

<p>{{show()}}</p>

</div>

{{msg}} <!--我们这里的 Vue 挂载到了 #vm,那么它只管理了 div#vm 这个区域,超出这个区域的表达式无效-->

<script>

//调用 Vue 的构造函数,产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变

msg: "欢迎使用 Vue 前端框架"

},

methods:{//定义 Vue 对象(vm)的方法

show:function () {

//this 指的就是当前的 Vue 对象(vm),即 this === vm,this.msg 就是指上面 data 中定义的 Vue 对象的属性 msg

return this.msg +",非常高兴您能来学习";

}

}

})

</script>

</body>

</html>

3. 当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有属性,当这些属性发生变化时,HTML 中的视图(表达式 {{}} )也会发生变化。

示例:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>demo2</title>

<script src="js/vue.min.js"></script>

</head>

<body>

<div id="vm">

<!--{{内容}}:Vue 的表达式,用于显示 Vue 对象的属性或方法的返回值-->

<p>name:{{name}}</p>

<p>age:{{age}}</p>

<p>score:{{score}}</p>

</div>

<script>

//定义一个 json 对象

var data = {name:'张三',age:23,score:90};

//调用 Vue 的构造函数,产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了

el:"#vm",

data: data,//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变

});

//vm.namedata.name 都是同一个对象,都是 Vue 对象的属性

document.write(vm.name === data.name);

document.write("<br>");

//通过Vue对象vm改变属性值,那么表达式{{}}中对应的属性值也会跟着变化,因为 Vue 是响应式框架

vm.name = '李四';

//同理,改变 json 对象data 的属性值,也会影响原始Vue的属性值,表达式也会跟着变化

data.age = 25;

document.write(vm.age + "<br>");

/**

* 综上所述,vm 是 Vue 的实例,data 中的属性就是 vm 的属性,methods 的方法就是 vm 的方法,一旦属性发生变化,就会引起

* 界面的表达式 {{}} 中的属性值变化

*/

</script>

</body>

</html>

4. 除了数据属性,Vue 实例还提供了一些有用的实例属性和方法,它们都有前缀 $,以便于区分用于定义的属性,比如:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>demo3</title>

<script src="js/vue.min.js"></script>

</head>

<body>

<div id="vm">

<!--{{内容}}:Vue 的表达式,用于显示 Vue 对象的属性或方法的返回值-->

<p>name:{{name}}</p>

<p>age:{{age}}</p>

<p>score:{{score}}</p>

</div>

<script>

//定义一个 json 对象

var data = {name:'张三',age:23,score:90};

//调用 Vue 的构造函数,产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了

el:"#vm",

data: data,//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变

});

//Vue 的实例 vm 的实例属性 $data 是否恒等于 json 对象 data

document.write(vm.$data === data);

document.write("<br>");

//Vue 的实例 vm 的实例属性 $el 是否恒等于 #vm 这个 DOM 对象

document.write(vm.$el === document.getElementById("vm"));

</script>

</body>

</html>

5. Vue实例的生命周期

每个 Vue 实例在被创建之前都需要经历一系列的初始化过程,例如,需要配置数据观察(data observer),编译模板,挂载实例到 DOM,然后在数据发生变化的时候更新 DOM,在这个过程中,实例也会调用一些生命周期的钩子函数(回调函数),这就给我们提供了执行自定义逻辑的机会,这些钩子函数有:beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed,这些函数在实例生命周期的不同阶段被调用。

(1)生命周期的示意图:

(2)生命周期钩子函数(回调函数,由系统调用自动执行)说明

① beforeCreate:组件(Vue实例)实例刚创建,组件属性计算之前

② created:组件实例创建完成,属性已绑定,但是DOM还未生成,$el 实例属性还不存在

③ beforeMount:模板编译/挂载之前

④ mounted:模板编译/挂载之后

⑤ beforeUpdate:组件更新之前

⑥ updated:组件更新之后

⑦ beforeDestroy:组件销毁之前

⑧ destroyed:组件销毁之后

示例:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>demo4</title>

<script src="js/vue.min.js"></script>

</head>

<body>

<div id="vm">

<!--

v-model 指令:双向数据绑定指令,它绑定的 a 属性的值,即 input 元素的 value 发生变化的时候,会引起 Vue 实例的属性 a

发生变化,反过来,当 Vue 实例的属性 a 发生变化时,v-model 绑定的 a 值表示 input 元素的 value 值也会跟着变化,同时

表达式{{a}}中的a的值也会同步变化

-->

<input type="text" v-model="a"> <br>

<!--{{内容}}:Vue 的表达式,用于显示 Vue 对象的属性或方法的返回值-->

<p>a:{{a}}</p>

</div>

<script>

//调用 Vue 的构造函数,产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变

a:0

},//下面的都是 Vue 的生命周期方法,也称为回调方法,由系统自动调用,不是程序员去调用的

beforeCreate: function () {

//this 指当前 Vue 对象 vm,this.a 就是上面data 中定义的 Vue 的属性 a

console.log("beforeCreate,a=" + this.a);

},

created: function () {

//this 指当前 Vue 对象 vm,this.a 就是上面data 中定义的 Vue 的属性 a

console.log("created,a=" + this.a);

},

beforeMount: function () {

//this 指当前 Vue 对象 vm,this.a 就是上面data 中定义的 Vue 的属性 a

console.log("beforeMount,a=" + this.a);

},

mounted: function () {

//this 指当前 Vue 对象 vm,this.a 就是上面data 中定义的 Vue 的属性 a

console.log("mounted,a=" + this.a);

},

beforeUpdate: function () {

//this 指当前 Vue 对象 vm,this.a 就是上面data 中定义的 Vue 的属性 a

console.log("beforeUpdate,a=" + this.a);

},

updated: function () {

//this 指当前 Vue 对象 vm,this.a 就是上面data 中定义的 Vue 的属性 a

console.log("updated,a=" + this.a);

},

beforeDestroy: function () {

//this 指当前 Vue 对象 vm,this.a 就是上面data 中定义的 Vue 的属性 a

console.log("beforeDestroy,a=" + this.a);

},

destroyed: function () {

//this 指当前 Vue 对象 vm,this.a 就是上面data 中定义的 Vue 的属性 a

console.log("destroyed,a=" + this.a);

}

});

</script>

</body>

</html>

三、Vue 模板语法

1.Vue 使用了基于 HTML 模板的语法,允许开发人员声明式的将 DOM 绑定至底层的 Vue 实例数据。

2.插值:

(1)文本插值:利用表达式( {{表达式}} )的文本插值:

示例:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>demo1</title>

<script src="js/vue.min.js"></script>

</head>

<body>

<div id="vm">

<!--{{内容}}:Vue 的表达式,用于显示 Vue 对象的属性或方法的返回值-->

<p>{{msg}}</p>

<p>{{show()}}</p>

</div>

{{msg}} <!--我们这里的 Vue 挂载到了 #vm,那么它只管理了 div#vm 这个区域,超出这个区域的表达式无效-->

<script>

//调用 Vue 的构造函数,产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变

msg: "欢迎使用 Vue 前端框架"

},

methods:{//定义 Vue 对象(vm)的方法

show:function () {

//this 指的就是当前的 Vue 对象(vm),即 this === vm,this.msg 就是指上面 data 中定义的 Vue 对象的属性 msg

return this.msg +",非常高兴您能来学习";

}

}

})

</script>

</body>

</html>

(2)使用指令:v-html(类似于 jquery 的 html())

示例:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>demo5</title>

<script src="js/vue.min.js"></script>

</head>

<body>

<div id="vm">

<!--v-html 指令:用于在这里插入 HTML 片段,类似于 DOM 中 innerHTML-->

<p v-html="msg"></p>

<!--{{内容}}:Vue 的表达式,用于显示 Vue 对象的属性或方法的返回值-->

<!--表达式只会当成普通文本处理-->

<p>{{msg}}</p>

</div>

<script>

//调用 Vue 的构造函数,产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变

msg: "<h1>欢迎使用 Vue 前端框架<h1>"

}

})

</script>

</body>

</html>

(3)属性:HTML 元素的属性值应该使用 v-bind 指令,v-bind 指令可以用来绑定一个属性值,这个属性值可以根据 Vue 实例中的属性进行响应式变化。

示例:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>demo6</title>

<script src="js/vue.min.js"></script>

<style>

.cls{

width: 200px;

height: 200px;

background-color: blue;

}

</style>

</head>

<body>

<div id="vm">

<!--通过选中或不选中 checkbox,来动态的给 div 添加 .cls 类样式-->

<label for="c1">修改颜色:</label>

<!--v-model 进行双向数据绑定,选中 checkbox 的时候,绑定的 use 值为 true,不选中时 use 的值为 false,这样双向数据绑定之后,

input的变化就会引起 Vue 属性 use 的变化,反过来也是一样的,属性的变化也会引起 input 的变化-->

<input type="checkbox" v-model="use" id="c1">

<!--如果 use 为 true,则动态给 div 添加 .cls 类,为 false,则不添加-->

<div v-bind:class="{'cls':use}"></div>

</div>

<script>

//调用 Vue 的构造函数,产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变

use: false

}

})

</script>

</body>

</html>

(4)表达式:Vue 提供了完全的 JavaScript 表达式支持

例如:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>demo7</title>

<script src="js/vue.min.js"></script>

</head>

<body>

<div id="vm">

<p>{{5 + 5}}</p>

<p>{{ok ? 'YES' : 'NO'}}</p>

<!--表达式还支持js函数调用,这里将message属性的每个字符分割形成字符数组后再颠倒顺序后再组合在一起-->

<p>{{message.split('').reverse().join('')}}</p>

<div v-bind:id="'list-' + id"></div>

</div>

<script>

//调用 Vue 的构造函数,产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变

ok:true,

message:'helloworld',

id:10011

}

});

</script>

</body>

</html>

(5)指令:指令是带有 v- 前缀的特殊属性,指令用于在表达式的值发生变化的时候,将某些行为应用到 DOM 上,比如:v-if 指令可以根据指定的值判断是否显示某个标签元素(注意:这里的显示或不显示是通过删除对应的HTML 元素来达到)

示例:

(6)参数:参数在指令后以冒号指明,比如,v-bind 指令被用来响应式的更新 HTML 元素的属性。

示例:

(7)修饰符:修饰符是以 "." 操作符指明的特殊后缀,用于指出一个指令应该以特殊的方式绑定,比如 .prevent 修饰符告诉 v-on(绑定事件)指令,在触发事件的时候调用 event.preventDefault() 来阻止事件的默认行为。

示例:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>demo10</title>

<script src="js/vue.min.js"></script>

</head>

<body>

<div id="vm">

<!-- v-on:事件名="事件函数":用于绑定一个事件,事件名和 DOM 中的 addEventListener 相同,事件函数和其他函数一样都是写在 Vue 的

methods 中的,这里的 .prevent 修饰符表示要调用事件对象 event.preventDefault() 方法来阻止事件的默认行为,这里是阻止表单提交-->

<form action="getname.jsp" v-on:submit.prevent="submit()">

姓名:<input type="text" name="name"> <br>

<input type="submit" value="提交">

</form>

</div>

<script>

//调用 Vue 的构造函数,产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变

},

methods: {//Vue实例的方法

submit: function () {//事件函数

alert("表单被提交");

}

}

});

</script>

</body>

</html>

可以看到,提交事件执行了,但是表单没有提交。

(8)用户输入:在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定

示例:

(9)过滤器:Vue 允许自定义过滤器,用于格式化一些文本信息,由Linux 中的"管道符"来指示,例如:{{message | filter}}

示例:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>demo12</title>

<script src="js/vue.min.js"></script>

</head>

<body>

<div id="vm">

<p>{{message | capitalize}}</p>

</div>

<script>

//调用 Vue 的构造函数,产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变

message: "helloworld"//Model/M:数据

},

filters: {//自定义过滤器

//自定义过滤器,名为 capitalize,其中 value 参数就是待过滤的字符串,即表达式中"|"前面的字符串

capitalize: function (value) {

if(!value) return "";//如果输入的 value 不合法,则返回空串

value = value.toString();//转换为字符串

//把首字母大写再拼接上后面的字符串

return value.charAt(0).toUpperCase() + value.slice(1);

}

}

});

</script>

</body>

</html>

(10)缩写

1) v-bind的缩写

2) v-on的缩写

四、条件语句

1.条件判断

(1)v-if 指令:根据后面指定的属性值是 true 还是 false 来决定是否显示(显示或删除)HTML元素。

示例:见前面的示例

(2)v-else:可以给 v-if 指令添加一个 v-else 指令,类似于 JavaScript 中的 if...else 语句

示例:

(3)v-else-if:用于 v-if 中,类似于 JavaScript 的if...elseif...elseif...else...语句

示例:

2.v-show:v-show 指令通过改变 CSS 属性的 display 来决定是否显示HTML元素,而 v-if 会决定是否删除 HTML 元素。

示例:

五、Vue循环语句

1. v-for 指令:

v-for 需要指定 site in sites 形式的特殊语法,其中 sites 是待遍历的集合,site 是集合元素迭代的别名

示例:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>demo16</title>

<script src="js/vue.min.js"></script>

</head>

<body>

<div id="vm">

<table border="1" cellspacing="0" cellpadding="0">

<tr>

<th>编号</th>

<th>姓名</th>

<th>年龄</th>

<th>性别</th>

<th>操作</th>

</tr>

<tr v-for="user in users">

<td>{{user.id}}</td>

<td>{{user.name}}</td>

<td>{{user.age}}</td>

<td>{{user.sex}}</td>

<td>

<a href="#">删除</a><a href="#">更新</a>

</td>

</tr>

</table>

</div>

<script>

//调用 Vue 的构造函数,产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变

users: [

{id:10011,name:'张三',age:23,sex:'男'},

{id:10012,name:'李四',age:23,sex:'男'},

{id:10013,name:'王五',age:22,sex:'男'},

{id:10014,name:'赵六',age:21,sex:'女'},

{id:10015,name:'田七',age:20,sex:'男'},

{id:10016,name:'丽丽',age:25,sex:'女'},

{id:10017,name:'娜娜',age:23,sex:'女'},

{id:10018,name:'飞飞',age:24,sex:'男'}

]

},

methods:{

swap:function () {

this.seen = !this.seen;

}

}

});

</script>

</body>

</html>

v-for 除了可以遍历数组等集合之外,还可以遍历对象(因为对象其本质也是一个关联数组)

例如:

还可以已提供第二个参数作为键名(属性名):

还可以带第三个参数,表示索引(集合和对象遍历时都可以带上这个索引):

遍历集合时带上索引:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>demo16</title>

<script src="js/vue.min.js"></script>

</head>

<body>

<div id="vm">

<table border="1" cellspacing="0" cellpadding="0">

<tr>

<th>编号</th>

<th>姓名</th>

<th>年龄</th>

<th>性别</th>

<th>操作</th>

</tr>

<tr v-for="(user,index) in users">

<td>{{user.id}}</td>

<td>{{user.name}}</td>

<td>{{user.age}}</td>

<td>{{user.sex}}</td>

<td>

<span>索引:{{index}}</span>

<a href="#">删除</a><a href="#">更新</a>

</td>

</tr>

</table>

</div>

<script>

//调用 Vue 的构造函数,产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变

users: [

{id:10011,name:'张三',age:23,sex:'男'},

{id:10012,name:'李四',age:23,sex:'男'},

{id:10013,name:'王五',age:22,sex:'男'},

{id:10014,name:'赵六',age:21,sex:'女'},

{id:10015,name:'田七',age:20,sex:'男'},

{id:10016,name:'丽丽',age:25,sex:'女'},

{id:10017,name:'娜娜',age:23,sex:'女'},

{id:10018,name:'飞飞',age:24,sex:'男'}

]

},

methods:{

swap:function () {

this.seen = !this.seen;

}

}

});

</script>

</body>

</html>

还可以迭代整数:

六、Vue的计算属性

1.计算属性是通过对 Vue 对象其他属性计算之后得到的一个新的 Vue 的属性,计算属性使用关键字:computed,计算属性在处理一些复杂的逻辑的时候比较有用,比如之前的例子:

表达式中的表达式很复杂,也不容易看懂,我们可以使用计算属性的方式来实现。

示例:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>demo19</title>

<script src="js/vue.min.js"></script>

</head>

<body>

<div id="vm">

<input type="text" v-model="message">

<p>原始的字符串:{{message}}</p>

<p>计算属性之后的字符串:{{reverseMessage}}</p>

</div>

<script>

//调用 Vue 的构造函数,产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变

message:''

},

computed: {//计算属性

//reverseMessage 就是计算属性,也是 Vue 的属性,这个匿名函数就是计算属性的 getter 方法

//计算属性 reverseMessage 依赖于 message 属性,message 变化,reverseMessage 也跟着变化

reverseMessage:function () {

//this.message 就是指 data 中定义的 Vue 的属性 message

return this.message.split('').reverse().join('');

}

}

});

</script>

</body>

</html>

计算属性 computed 默认只有一个 getter 方法,我们也可以提供一个 setter 方法,例如:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>demo20</title>

<script src="js/vue.min.js"></script>

</head>

<body>

<div id="vm">

<!--这里其实调用了计算属性 site 的 getter 方法输出-->

<p>{{site}}</p>

</div>

<script>

//调用 Vue 的构造函数,产生一个 Vue 对象 vm

var vm = new Vue({

//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了

el:"#vm",

data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变

name:'Google',

url: 'http://www.google.com'

},

computed: {//计算属性

site: {

get:function () {//计算属性 site 的 getter 方法

return this.name + "," + this.url;

},

set:function (newValue) {//计算属性 site 的 setter 方法,参数newValue:给 site 赋值的时候,newValue就是这个值

var names = newValue.split(",");

this.name = names[0];

this.url = names[1];

}

}

}

});

//这里就给计算属性 site 进行了赋值,那么就会调用 site 的 setter 方法,setter 的 newValue 参数就是赋的值

vm.site = "Vue 教程,http://www.edu.com";

</script>

</body>

</html>

七、监听属性

1.Vue 提供了监听属性的方法 watch,我们可以通过 watch方法来监听数据的变化(注意:Vue 实例属性和方法需要加上 前缀,例如,vm.data,vm.el 和 vm.watch)

示例:利用 vm 实例和 $watch 方法监听数据的变化

相关推荐
郝亚军几秒前
炫酷圆形按钮调色器
前端·javascript·css
青红光硫化黑7 分钟前
学习bug
开发语言·javascript·ecmascript
LIUENG25 分钟前
Vue2 中的响应式原理
前端·vue.js
视觉CG41 分钟前
【JS】扁平树数据转为树结构
android·java·javascript
wordbaby1 小时前
以0deg为起点,探讨CSS线性渐变的方向
前端·css
Spider_Man1 小时前
Node.js 胡编乱造机:让代码帮你写鸡汤,灵感不求人!🧙‍♂️✨
前端·javascript·node.js
BUG收容所所长1 小时前
如何用React快速搭建一个AI语音合成应用?从零到一的完整实战指南
前端·javascript·react.js
用户0706305023791 小时前
Flutter开发实战之测试驱动开发
css
每天开心1 小时前
HTML5 拖拽:让网页像现实世界一样“拿起来,放进去”
前端·javascript·html
San30.1 小时前
表单元素与美化技巧:打造用户友好的交互体验
前端·css·html·交互·css3·html5