标签：word 重建 哈哈 head 指令 dom 事件 结构 javascrip
一、指令---是一种特殊的自定义间属性
指令的职责就是当表达式的值改变时，相应的将某些行为应用到DOM上，在Vue中，指令以v-开头
helloworld例子：数据绑定，点击后弹出提示框
1 <!--模板-->
2 <div id="demo">
3 <span v-on:click="clickHandle">{{message}} </span>
4 </div>
5
6 <script type="text/javascript">
7 //数据
8 let obj = {
9 message:"hello,vue"
10 }
11
12 new Vue({
13 el:"#demo",
14 data:obj,
15 methods:{
16 clickHandle(){
17 alert("lick")
18 }
19 }
20 });
21 </script>
二、内置指令
v-bind ---------动态的绑定数据，简写为:
v-on ---------- 绑定事件监听器，简写为@
v-text ---------更新数据，会覆盖已有结构
v-html -------可以解析数据中的html结构
v-show ---------根据值的真假，切换元素的display属性
v-if ------------ 根据值的真假，切换元素会被销毁、重建
v-else-if --------多条件判断，为真假渲染
v-else ---------条件都不符合渲染
v-for --------基于源数据多次渲染元素或模板块
v-model ------在表单控件元素上创建双向数据绑定
v-pre --------跳过元素和子元素的编译过程
v-once ----- 只渲染一次，随后数据更新不重新渲染
v-cloak -------隐藏未编译的Mustache语法，css中设置{v-cloak}{display:none}
例子：vue的双向数据绑定
1 <div id="demo">
2 <input type="text" name="" id="" value="" v-model="message"/>
3 <p>{{message}}</p>
4 </div>
5 <script type="text/javascript">
6 //数据
7 let data = {
8 message:"hello vue"
9 }
10
11 //Vm实例
12 var Vm = new Vue({
13 el:"#demo",
14 data:data
15 })
16 </script>
例子：vue的html模板：但内容是文本时，使用v-html,v-text ，{{}}这3种方式的能达到一样的效果
1 <!--模板-->
2 <div id="demo" v-html="message">
3 <!--{{message}}-->
4 </div>
5
6 <script type="text/javascript">
7 //数据
8 let data = {
9 message:"hello ，Vue"
10 }
11
12 //实例
13 var Vm = new Vue({
14 //挂载元素
15 el:"#demo",
16 data:data
17 })
18 </script>
例子：根据boolead值给元素绑定类
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
7 <style type="text/css">
8 .red{color: red;}
9 .fonrSize{font-size: 30px;}
10 </style>
11 </head>
12 <body>
13 <!--模板-->
14 <div id="demo">
15 <span class="fonrSize" :class=‘{red:addClass}‘>哈哈哈</span>
16 </div>
17
18 <script type="text/javascript">
19 //数据
20 let obj = {
21 addClass:true
22 }
23 var vm = new Vue({
24 el:"#demo",
25 data:obj
26 })
27 </script>
28 </body>
29 </html>
三、html模板----------基于Dom的模板，模板都是可解析的有效的HTML
插值：
文本----------------------使用"Mustache"语法（双大括号）{{value}}，作用：替换实例上的属性值，当值改变时，插值内容处会自动更新
原生html-----------------双大括号输出的是文本，不会解析html
属性----------------------使用v-bind进行绑定，可以响应变化
使用javascript表达式-----写简单的表达式
例子：html模板1
1 <!--模板-->
2 <div id="demo">
3 <span :cutomId="id">{{message}} </span>
4 </div>
5 <script type="text/javascript">
6 //数据
7 let obj = {
8 message:"helloword",
9 id:"123"
10 }
11 var vm = new Vue({
12 el:"#demo",
13 data:obj
14 })
15 </script>
例子:hrml模板2
1 <!--模板-->
2 <div id="demo" :custom="abc">
3 <div v-html="html">{{message}} </div>
4 </div>
5
6 <script type="text/javascript">
7 //数据
8 let obj = {
9 html:"<div>hello,</div>",
10 abc:111
11 }
12 var vm = new Vue({
13 el:"#demo",
14 data:obj
15 })
16 </script>
四、字符串模板
template字符串：template选项对象的属性，模板将会替换挂载的元素，挂载元素的内容都将被忽略，并且根节点只有一个。将html结构写在一对script标签中，设置 type="x-template"
例子：字符串模板1
1 <!--模板-->
2 <div id="demo">
3 <span :cutomId="id">啦啦啦 </span>
4 </div>
5
6 <script type="text/javascript">
7 //数据
8 let obj = {
9 message:"helloword",
10 abc:"123"
11 }
12 var str = `<div>hello，
13 {{abc}},
14 <span>哈哈哈</span>
15 </div>`
16
17 var vm = new Vue({
18 el:"#demo",
19 data:obj,
20 template:str
21 })
22 </script>
例子：字符串模板2
1 <!--模板-->
2 <div id="demo">
3 <span :cutomId="id">啦啦啦 </span>
4 </div>
5 <script type="x-template" id="tem">
6 <div>
7 hello，
8 {{abc}},
9 <span>哈哈哈</span>
10 </div>
11 </script>
12 <script type="text/javascript">
13 //数据
14 let obj = {
15 message:"helloword",
16 abc:"123"
17 }
18 var vm = new Vue({
19 el:"#demo",
20 data:obj,
21 template:"#tem"
22 })
23 </script>
五、模板--render函数
render函数
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .bg{background: yellow;}
8 </style>
9 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
10 </head>
11 <body>
12 <!--模板-->
13 <div id="demo">
14 <span :cutomId="id">啦啦啦 </span>
15 </div>
16
17 <script type="text/javascript">
18 //数据
19 let obj = {
20 message:"helloword",
21 abc:"123"
22 }
23
24 var vm = new Vue({
25 el:"#demo",
26 data:obj,
27 render(createElement){
28 return createElement(
29 "ul",
30 {
31 class:{
32 bg:true
33 },
34 style:{
35 fontSize:"50px"
36 },
37 attrs:{
38 abc:‘cccc‘
39 },
40 domProps:{
41 innerHTML:"<li>我是html</li>"
42 }
43 },
44 [
45 createElement("li",1),
46 createElement("li",2),
47 createElement("li",3),
48 ]
49 )
50 }
51 })
52 </script>
53 </body>
54 </html>
标签：word 重建 哈哈 head 指令 dom 事件 结构 javascrip
原文地址：http://www.cnblogs.com/qqing/p/6912182.html
