vue 修改模板{{}}标签_Vue模板语法
1、Vue，渐进式Javascript框架。
渐进式的含义理解，从左到右递进关系，声明式渲染(最简单的模式)->组件系统(组件化)->客户端路由(局部更新，浏览器的历史回退功能)->集中式状态管理(Vuex做状态管理)->项目构建(大型项目，前后端分离)。
1
2
3
4
5
hello world
6
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 world
6
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 world
6
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 world
6
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 world
6
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 world
6
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 world
6
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 world
6
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 world
6
7
8
9
10
11
12
13
14
15
16
17
18
vue 修改模板{{}}标签_Vue模板语法相关推荐
- Django框架学习20--模板变量，模板标签，模板过滤器及自定义模板过滤器，自定义模板标签
1.模板变量 string 字符串和 int 类型,通过key名称直接取值,如:{{ n_name }} list类型的取值,通过点下班取值,如:{{ fancy.0 }}.{{ fancy.1 }} ...
- html5只能django来写if吗,（4）Django学习——模板标签定义及语法：for循环，if判断，页面跳转，开启关闭自动转义，ur...
1.常用标签 (1)模板标签重要概念: 1.定义:标签在渲染的过程中提供任意的逻辑 注意:(这个定义是刻意模糊的. 例如,一个标签可以输出内容,作为控制结构,例如"if"语句或&q ...
- 模板标签及模板的继承与引用
1.常用的模板标签 - 作用是什么:提供各种逻辑 view.py: def index(request): #模板标签 --常用标签 总结:语法 {% tag %} {% endtag %} {% t ...
- vue 修改模板{{}}标签_vue.js - Vue单文件的template标签
问 题 单文件中用template标签包含html模板内容,但我现在要用一个template标签+v-for来包含多个元素,此时webpack编译时报错了. 下面是vue文件部分内容: {{ bran ...
- vue 修改模板{{}}标签_vue-admin-template模板添加tagsview
参考: 一.从vue-element-admin复制文件: vue-admin-template\src\layout\components\TagsView 文件夹 vue-admin-templ ...
- vue修改meta值_vue中动态设置meta标签和title标签的方法
vue中动态设置meta标签和title标签的方法 因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 ...
- vue 修改div宽度_Vue 组件通信方式及其应用场景总结（1.5W字）
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰.今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其 ...
- vue修改数据连接数据库_vue实现数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
- vue 修改div宽度_vue 拖动调整左右两侧div的宽度
原文是左中右三种情况的拖动.由于项目需要,我删除掉了右边的,直接左右区域拖动调整div宽度 1.拖动,调整左右两侧宽度 西瓜 备注2 西瓜 备注2 export default { name: 'Da ...
- 09、HTLM中直接写get请求和模板标签分片功能
2019独角兽企业重金招聘Python工程师标准>>> 一.在html中herf属性直接写get请求,传数据到相应函数坐下一步操作 二.使用模板标签的过滤语法slice来分片 1.u ...
最新文章
- 阿里云accessKey如何创建？~ 2015.08.25
- bzoj4484[JSOI2015]最小表示
- [js] 使用js实现一个循环队列
- nifi 实现数据库到数据库之间数据同步
- Python 基本数据类型 (二) - 字符串
- 使用Win Server 2012 R2的IIS创建FTP
- （6）Zynq AXI_HP接口介绍
- C++提高部分_C++函数模板_基本用法---C++语言工作笔记081
- 排序算法第四篇——冒泡排序
- Hive命名空间-自定义变量
- 新版vip在线解析html源码
- 这些藏在成都的 NB 互联网公司
- 化合物修饰壳聚糖水凝胶：丙烯酸接枝/聚乙烯醇/温敏淫羊藿苷/醛-亚胺-壳聚糖水凝胶的制备
- 完美世界年营收85亿：同比降17% 影视业务整体产生亏损2亿
- 利用百度云存储制作外链mp3音乐地址
- mac录屏如何把声音录进去？
- 分别实现网页播放mp3、flv、wmv、Flash，代码兼容FireFox
- 二叉树算法大总结:借助遍历的题型+需要借助递归返回多个信息的题型[本质:遍历]
- phoneGap3.0安装步骤(以windows下的android环境为例)：
- 侯捷老师整理||IT专业术语中英对照表