标签：scope ... logs alt 对象 direct .com nts ges
每一个应用都是通过vue这个构造函数创建根实例启动。
每个vue实例都会代理其data对象的所有属性，这些被代理的属性是响应的，但新添加的属性不具备响应。
以$开头，如$el $data ...
声明式：只需要声明在哪里，做什么，无需关心如何实现。
命令式：需要具体代码表达在哪里，做什么，如何实现。
是一种特殊的自定义行间属性，职责是当表达式改变时相应的将某些行为应用到DOM上；在vue中，指令以v-开头。
vue中的内置指令
分为html模板，字符串模板，模板render函数
基于DOM的模板，模板都是可解析的有效的HTML
——插值
文本插值：使用"Mustache"语法（双大括号）{{value}}
作用：替换实例上的属性值，当值改变时，插值内容会自动更新。
原生的html：双大括号输出的是文本，不会解析html
属性：使用v-bind绑定属性，可以响应变化
<!-- 模板 -->
<div id="demo" v-bind:custom="abc"> //绑定属性；可以简写成 ：custom="abc"
<div>{{html}}</div> //不解析html
<div v-html="html"></div> //会解析html，将html插入了div中
</div>
<script>
//数据
let obj = {
html:"<div>hello</div>" //原生javascript
abc:1
}
var vm = new Vue({
el:"#demo",
data:obj
});
</script>
使用javascript表达式：写简单的表达式，不要写语句
{{3+1}}
{{ true ? "yes" : "no" }}
模板会替换挂载元素的，挂载元素的内容都将会被忽略；
<!-- 模板 -->
<div id="demo">
<span>haha</span> //被忽略
</div>
<script>
//数据
let obj = {
abc:1
}
var str=‘<div>hello vue,{{abc}}</div>‘;
var vm = new Vue({
el:"#demo",
data:obj,
template:str
});
</script>
字符串模板的根节点只能有一个；
将html结构写在一个script标签中，设置type="x-template"；
<script type="x-template" id="temp"> <div>hello vue,{{abc}}</div> </script> <script> //数据 let obj = { abc:1 } var vm = new Vue({ el:"#demo", data:obj, template:"#temp" }); </script>
如何给标签添加class：
<style> .red{ color:red; } </style>
<!-- 模板 --> <div id="demo"> <span v-bind:class=‘{red:addClass}‘ >haha</span> </div> <script> //数据 let obj = { addClass:true }; var vm = new Vue({ el:"#demo", data:obj }); </script>
render函数：
createElement(标签名，[数据对象]，子元素）； 其中子元素为文本或数组。
class:{} //绑定class，和v-bind:class一样的API
style:{} //绑定样式，和v-bind:style一样的API
attrs:{} //添加自定义行间属性
domProps:{} //DOM元素属性
on:{} //绑定事件
nativeOn:{} //监听原生事件
directives:{} //自定义命令
scopedSlots:{} //slot作用域
slot:{} //定义slot名称
key:"key" //给元素添加唯一标识
ref:"ref" //引用信息
var vm = new Vue({ el:"#demo", data:obj, render(createElement){ return createElement( "ul", { class:{ bg:true }, style:{ fontSize : ‘50px‘ }, attrs:{ abc:"abc" }, domProps:{ innerHTML:"<li>我是html</li>" } }, [ createElement("li",1), createElement("li",2), createElement("li",3) ] ); } });
标签：scope ... logs alt 对象 direct .com nts ges
原文地址：http://www.cnblogs.com/hpl525/p/7860329.html
