vue入门：（模板语法与指令）
vuejs使用及HTML的模板语法，可以实现声明式将DOM绑定至底层VUE实例的数据。通过模板语法将数据渲染进DOM的系统，结合响应系统，在应用状态改变时，Vue能够计算出重新渲染组件的最小代价并应用到DOM操作上。
VUE的模板语法的内容包括：插值、指令。
插值包括：文本插值、原始HTML插值、特性插值、以及使用javascript表达式实现插值。
指令：参数、动态参数、修饰符。
缩写形式是指v-bind和v-on指定可以采用缩写形式：'v-bind:'-->‘:’、'v-on'-->'@'。
一、vue模板语法之插值
- 文本插值
- 原始HTML插值
- 特性插值
- javascript表达式实现插值
1.1文本插值：{{}}
<div id="user">{{userName}}</div>
<script>
new Vue({
el:'#user',
data:{
userName:'他乡踏雪'
}
});
</script>
渲染结果：
<div id="user">他乡踏雪</div>
单次绑定：v-once
v-once单次渲染指令，只渲染元素和组件一次，随后的重新渲染，元素/组件及所有的子节点将被视为静态并跳过。这可以用于优化性能。
<!--v-once单次渲染-->
<span v-once>{{sex}}</span>
1.2原始HTML插值：v-html、v-text
<div id="user" v-html="dataHtml"></div>
<script>
new Vue({
el:'#user',
data:{
userName:'他乡踏雪',
dataHtml:'<div><span>昵称：</span><span>他乡踏雪</span></div><div><span>职业：</span><span>前端开发工程师</span></div>'
}
});
</script>
渲染结果：
<div id="user">
<div>
<span>昵称：</span>
<span>他乡踏雪</span>
</div>
<div>
<span>职业：</span>
<span>前端开发工程师</span>
</div>
</div>
这里的v-html和v-text同等与element.innerHTML和element.innerText的效果。但是这两个指令不能复合局部模板，就是说不能在数据中再插入模板语法，比如“<span>{{userName}}</span>”这个段v-html数据中的复合插入userName不会生效（v-text一样不生效）。
在vue官方文档中提到，需要谨慎使用v-html指令，不要对用户提供的内容执行v-html指令，因为很容易引发XSS攻击。
1.3特性插值：v-bind指令以及简写
<div id="user" v-bind:class="className">{{userName}}</div>
<script>
new Vue({
el:'#user',
data:{
userName:'他乡踏雪',
className:'userWarpper aaa'
}
});
</script>
渲染结果：
<div id="user" class="userWarrper">他乡踏雪</div>
v-bind可以省略不写，比如示例中的代码可以写成:class="userName",关于元素特性插值需要重点关注的是比如class多个值怎么插入，又比如style行间的样式特性值又怎么插入。这一块是个独立的内容，后面独立分析。
1.4JavaScript表达式实现插值
<div id="user">{{userName + '~丹'}}</div>
<script>
new Vue({
el:'#user',
data:{
userName:'他乡踏雪'
}
});
</script>
渲染结果：
<div id="user">他乡踏雪~丹</div>
这里说的JavaScript表达式插值不是说在js代码中，而是可以将js表达式插入到HTML中，这些表达式会在所属vue实例的数据作用域下被识别作为javascript被解析，但是只能包含单个表达式，所以下面的例子不会生效：
<!--这样的JavaScript表达式不会生效-->
<div>{{var userName = "他乡踏雪"}}</div>
<div>{{if(true){ return message }}}</div>
所以注意，三目运算可以有效执行，链式调用方法可以有效执行。
//可以被有效执行
{{ true ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
二、指令之参数与修饰符
- 参数
- 动态参数
- 修饰符
vuejs内置指令集：https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4
<a id="vueLink" v-bind:href="url">VUE</a>
<script>
new Vue({
el:'#vueLink',
data:{
url:'https://cn.vuejs.org/'
}
});
</script>
这部分暂时不关注渲染结果，这里我们需要关注指令表达式的结构，例如：v-bind:href="url"。v-bind可以响应式的更新HTML特性，再表达式中的url随这个数据的更新迭代，与数据绑定的DOM实体就会更新特性的属性值，通常这个数据在指令表达式中被称为“参数”。
<a id="vueLink" v-bind:[h]="url">VUE</a>
<script>
new Vue({
el:'#vueLink',
data:{
h:'href',
url:'https://cn.vuejs.org/'
}
});
</script>
从上一个示例到这个示例唯一发生改变的就是HTML特性href被[h]替换了，这个就是“动态参数”，也就是说在指令表达式中，指令的特性是可配置的，这个指令特性除了可以配置，同样事件指令v-on也是可以配置的，例如：
<a id="vuebut" v-on:[eventname]="changeName">点击输出:{{userName}}</a>
<script>
new Vue({
el:'#vuebut',
data:{
userName:'他乡踏雪',
eventname:'click'
},
methods:{
changeName(){
console.log("他乡踏雪");
}
}
});
动态参数使用起来比较的简单，但是需要注意的是动态参数不能使用大写字母，这个小问题一定注意，我刚刚学习使用vue时被这个问题困扰好久，网上的文档都没有相关解答，或许是因为这不是一个标准写法，所以大家在开发中还是严格按照规范的开发文档来实现避免错误。
然后就是关于修饰，先来看一个示例：
<div onclick="changeName()">
<a id="vuebut" v-on:[eventname].stop="changeName">点击输出:{{userName}}</a>
</div> <script>
new Vue({
el:'#vuebut',
data:{
userName:'他乡踏雪',
eventname:'click'
},
methods:{
changeName(){
console.log("他乡踏雪");
}
}
});
function changeName(){
console.log("我是div");
}
</script>
通过添加在指令表达式上添加stop修饰符，div上的点击事件就不会被触发，实现了阻止冒泡，同等与jQuery中的event.stopPropagation()方法。关于指令修饰符还有很多不同的修饰符，在后面的相关内容中再详细解析。
所谓指令修饰符就是在指令属性后面添加一个后缀，应用指令用于特殊绑定。
最新文章
- C#扩展方法
- Java学习——HashMap
- TarJan 算法求解有向连通图强连通分量
- HD 2177（威佐夫博弈 入门）
- 【转】正确理解PHP程序编译时的错误信息
- MVC-简单验证码制作
- VC MFC 屏蔽ESC和ENTER键关闭对话框
- poj 1442 Black Box(优先队列&Treap)
- 【Linux探索之旅】第一部分第二课：下载Linux，免费的噢
- angular学习笔记
- 51nod-1445-变色DNA（最短路）
- Python 学习之路的前言
- JAVA企业级应用TOMCAT实战
- 【BZOJ4826】【HNOI2017】影魔（扫描线，单调栈）
- Fiddler抓包5-接口测试（Composer）
- c# 自动计算字符串的宽度
- 开发kendo-ui弹窗组件
- CentOS 添加环境变量
- ES6学习笔记之map、set与数组、对象的对比
- java spring 等启动项目时的异常 或 程序异常的解决思路