vue 修改模板{{}}标签_Vue模板语法
1、Vue，渐进式Javascript框架。
渐进式的含义理解，从左到右递进关系，声明式渲染(最简单的模式)->组件系统(组件化)->客户端路由(局部更新，浏览器的历史回退功能)->集中式状态管理(Vuex做状态管理)->项目构建(大型项目，前后端分离)。
1
2
3
4
5
hello world6
7
8
9
16
17
18
19
20
21
22
23
24
25
26 // Vue代码运行原理分析，概述编译过程的概念(Vue语法->原生语法)，就是Vue代码经过Vue框架变成了原生js代码。
27 //创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。28 //Vue所做的工作也就是把数据填充把页面的标签里面。
29 var vm = newVue({30 //el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
31 el: '#app', //el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。32 //data模型数据，值是一个对象。
33 data: { //用于提供数据。
34 msg: 'hello Vue!'
35 }36
37 });38
39
40
2、Vue模板语法，默认语法的功能就是前端渲染，前端渲染即使把数据填充到html标签中。数据(来自服务器) + 模板(html标签) = 前端渲染(产物是静态html内容)。
前端渲染的三种方式。
1)、原生js拼接字符串。基本上就是将数据以字符串的方式拼接到html标签中。缺点是不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。
2)、使用前端模板引擎。它拥有自己的一套模板语法规则。优点是大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。缺点是没有专门提高事件机制。
3)、使用vue特有的模板语法。包含差值表达式、指令、事件绑定、属性绑定、样式绑定、分支循环结构。
3、Vue模板语法，什么是指令？
1)、什么是自定义属性。自定义属性是区别于标准属性的，标准属性是标签自带的属性。
2)、Vue指令的本质就是自定义属性。
3)、Vue指令的格式，以v-开始，比如v-cloak。指令的名称取决于设计者。
4、Vue模板语法，v-cloak指令用法。
1)、插值表达式存在的问题，就是闪动。
2)、如果解决该问题，使用v-cloak指令，可以解决闪动的问题。
3)、解决该问题的原理，先隐藏，替换好值之后再显式最终的值。
1
2
3
4
5
hello world6
7
8 [v-cloak] {9 display: none;10 }11
12
13
14
15
24
25
26
27
28
29
30
31 //Vue代码运行原理分析，概述编译过程的概念(Vue语法->原生语法)，就是Vue代码经过Vue框架变成了原生js代码。32 //创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。33 //Vue所做的工作也就是把数据填充把页面的标签里面。
34 var vm = newVue({35 //el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
36 el: '#app', //el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。37 //data模型数据，值是一个对象。
38 data: { //用于提供数据
39 msg: 'hello Vue!'
40 }41
42 });43
44
45
5、Vue模板语法，v-text、v-html、v-pre数据绑定指令用法。
1)、v-text填充纯文本。特点一、相比较插值表达式更加简洁。不存在闪动问题，比插值表达式好使的哦。
2)、v-html填充html片段。特点一、存在安全问题。特点二、本网站内部数据可以使用，来自第三方数据不可以用。
3)、v-pre填充原始信息。特点一、显式原始信息，跳过编译过程，分析编译过程。
1
2
3
4
5
hello world6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 //Vue代码运行原理分析，概述编译过程的概念(Vue语法->原生语法)，就是Vue代码经过Vue框架变成了原生js代码。23 //创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。24 //Vue所做的工作也就是把数据填充把页面的标签里面。
25 var vm = newVue({26 //el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
27 el: '#app', //el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。28 //data模型数据，值是一个对象。
29 data: { //用于提供数据
30 msg: 'hello Vue!',31 msg2: '
hello Vue!
', //可以使用v-html标签展示html代码。32 }33
34 });35
36
37
6、Vue模板语法，数据响应式。
1)、如何理解响应式。html5中的响应式(屏幕尺寸的变化导致样式的变化)、数据的响应式(数据的变化导致页面内容的变化)。
2)、什么是数据绑定。数据绑定就是将数据填充到标签中。
3)、v-once只编译一次。显式内容之后不再具有响应式功能。
1
2
3
4
5
hello world6
7
8
9
10
11
12
13
14
15
16
17
18
19 //Vue代码运行原理分析，概述编译过程的概念(Vue语法->原生语法)，就是Vue代码经过Vue框架变成了原生js代码。20 //创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。21 //Vue所做的工作也就是把数据填充把页面的标签里面。
22 var vm = newVue({23 //el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
24 el: '#app', //el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。25 //data模型数据，值是一个对象。
26 data: { //用于提供数据
27 msg: 'hello Vue!',28 info: 'hello world Vue !',29 }30
31 });32
33
34
7、Vue模板语法，双向数据绑定。
MVVM设计思想，最只要的理念就是分治，把不同的功能代码放到不同的模块，通过特定的方式建立关联。
1)、M指的是Model，就是data里面的数据，提供数据的。Model通过VM的Data Bindings数据绑定View。
2)、V指的是View，就是所写的模板Dom元素，提供页面展示效果的。View通过VM的DOM Listeners事件监听Model。
3)、VM指的是View-Model，就是控制逻辑，实现控制逻辑将两者结合到一起。
1
2
3
4
5
hello world6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 //Vue代码运行原理分析，概述编译过程的概念(Vue语法->原生语法)，就是Vue代码经过Vue框架变成了原生js代码。23 //创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。24 //Vue所做的工作也就是把数据填充把页面的标签里面。
25 var vm = newVue({26 //el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
27 el: '#app', //el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。28 //data模型数据，值是一个对象。
29 data: { //用于提供数据
30 msg: 'hello Vue!',31 }32
33 });34
35
36
8、Vue模板语法，事件绑定。
1)、 Vue如何处理事件？
v-on指令用法：。
v-on简写形式，。
2)、事件函数的调用方式。
直接绑定函数名称：加一。不需要传递事件对象，默认携带事件对象。
调用函数：减一。
1
2
3
4
5
hello world6
7
8
9
10
11
12
13
14
15
16
17 加一
18 减一
19
20
21
22
23
24
25 //Vue代码运行原理分析，概述编译过程的概念(Vue语法->原生语法)，就是Vue代码经过Vue框架变成了原生js代码。26 //创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。27 //Vue所做的工作也就是把数据填充把页面的标签里面。
28 var vm = newVue({29 //el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
30 el: '#app', //el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。31 //data模型数据，值是一个对象。
32 data: { //用于提供数据33 //msg: 'hello Vue!',
34 num: 1, //num初始化值为1
35 },36 methods: { //methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
37 add: function() {38 this.num++; //此处的this指的是vm即Vue的实例，通过vm可以访问到num。
39 },40 reduce: function() {41 this.num--;42 }43 }44
45 });46
47
48
3)、事件函数的参数传递。如果传参事件对象，固定格式$event。
普通的参数和事件对象：Say Hi。
1
2
3
4
5
hello world6
7
8
9
10
11
12
13
14
15
16
17
22
23 加一
24
25 减二
26
27
28 乘二
29
30
31
32
33
34
35 //Vue代码运行原理分析，概述编译过程的概念(Vue语法->原生语法)，就是Vue代码经过Vue框架变成了原生js代码。36 //创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。37 //Vue所做的工作也就是把数据填充把页面的标签里面。
38 var vm = newVue({39 //el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
40 el: '#app', //el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。41 //data模型数据，值是一个对象。
42 data: { //用于提供数据43 //msg: 'hello Vue!',
44 num: 1, //num初始化值为1
45 },46 methods: { //methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
47 add: function() {48 console.log(event.target.tagName); //通过event事件对象可以拿到触发事件的对象。
49 console.log(event.target.innerHTML); //通过event事件对象可以拿到内容。
50 this.num++; //此处的this指的是vm即Vue的实例，通过vm可以访问到num。
51 },52 reduce: function(param1, param2, param3) {53 console.log(param1);54 console.log(param2);55 console.log(param3);56 this.num = this.num -param1;57 },58 multip: function(param1, param2, event) {59 console.log(param1);60 console.log(param2);61 console.log(event.target.tagName); //通过event事件对象可以拿到触发事件的对象。
62 console.log(event.target.innerHTML); //通过event事件对象可以拿到内容。
63 this.num = this.num *param1;64 },65
66 }67
68 });69
70
71
4)、事件修饰符，处理事件的特殊行为。
.stop阻止冒泡：跳转。
.prevent阻止默认行为：跳转。
1
2
3
4
5
hello world6
7
8
9
10
11
12
13
18
19
20 加一
21
22 减二
23
24
25 乘二
26
27
28 百度
29
30
31
32
33
34
35 //Vue代码运行原理分析，概述编译过程的概念(Vue语法->原生语法)，就是Vue代码经过Vue框架变成了原生js代码。36 //创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。37 //Vue所做的工作也就是把数据填充把页面的标签里面。
38 var vm = newVue({39 //el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
40 el: '#app', //el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。41 //data模型数据，值是一个对象。
42 data: { //用于提供数据43 //msg: 'hello Vue!',
44 num: 1, //num初始化值为1
45 },46 methods: { //methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。47 //通过点击事件的冒泡触发了该方法的执行。
48 add0: function() {49 this.num++;50 },51 add: function() {52 console.log(event.target.tagName); //通过event事件对象可以拿到触发事件的对象。
53 console.log(event.target.innerHTML); //通过event事件对象可以拿到内容。
54 this.num++; //此处的this指的是vm即Vue的实例，通过vm可以访问到num。55
56 //阻止冒泡行为，就不会发生冒泡的行为。可以拿到事件对象就可以阻止冒泡的。57 //stopPropagation此方法可以根据事件对象调用阻止冒泡的发生。58 //event.stopPropagation();
59
60 },61 reduce: function(param1, param2, param3) {62 console.log(param1);63 console.log(param2);64 console.log(param3);65 this.num = this.num -param1;66 },67 multip: function(param1, param2, event) {68 console.log(param1);69 console.log(param2);70 console.log(event.target.tagName); //通过event事件对象可以拿到触发事件的对象。
71 console.log(event.target.innerHTML); //通过event事件对象可以拿到内容。
72 this.num = this.num *param1;73 },74 stopBlank: function(event) {75 //阻止默认跳转行为，原生Js的api，换成事件修饰符。76 //event.preventDefault();
77 },78
79 }80
81 });82
83
84
5)、按键修饰符。
.enter回车键：。
.delete删除键：。
1
2
3
4
5
hello world6
7
8
9
10
11
12
13
14
15
16
17
18