标签：ons 使用 return turn html 表达 v-on 基于 挂载
vue核心：响应式的数据绑定、组合的视图组件
指令：
一种特殊的自定义行间属性。当其表达式的值改变时相应地将某些行为应用到dom上，如绑定事件处理函数。
v-model 实现双向数据绑定 eg.首先显示屏上的内容会反应在输入框中，当输入框中输入其他内容可以改变显示屏上的内容
<div id="demo"> <!--模板-->
<input type="text" v-model="message" /> <!--v-model实现双向数据绑定-->
<p>{{message}}</p> <！--数据渲染-->
</div>
<script>
let data={
message:"hello vue" //这里的数据用于呈现在页面中的数据
}
var vm=new Vue({ //vm实例,通过vue声明一个参数，该参数为一个对象
el:"#demo", //html的挂载元素，里面直接写上选择器即可，一般用id，也可以用class的类名
data:data //上面定义的数据.data是一个对象，将数据绑定在模板里
});
</script>
v-on 实现事件绑定 eg.为<span>标签绑定点击事件，在下面的vm实例的methods中定义需要绑定的事件
//es6
<!--模板--> <div id="demo"> <span v-on:click="clickHandle()">{{message}}</span> <!--v-on指令可以实现绑定事件--> </div> <script> let obj={ message:"hello", //这里的数据是用于呈现在页面中的数据 } var vm=new Vue({ //vue实例，通过vue声明一个参数，该参数为一个对象 el:"#demo", //html的挂载元素，里面直接写上选择器即可 data:obj, //将上面定义的数据绑定在模板中 methods:{ clickHandle(){ //用于绑定的事件统一写在实例的methods中 alert("clicked"); } } }); </script>
//es5
<div id="demo">
<span v-on:click="clickHandle()">{{message}}</span>
</div>
<script>
var obj={
message:"hello"
}
new Vue({
el:"#demo",
data:obj,
methods:{
clickHandle:function(){
alert("clicked");
}
}
});
</script>
v-bind 动态的绑定数据，简写为 ：
<div id="demo" v-bind:custom="abc"> <!--可以通过v-bind绑定自定义属性-->
<div v-html="html"></div> <!--v-html指令将文本解析成html-->
</div>
<script>
let obj={ //数据
html:"<div>hello,miaov</div>",
abc:1
}
var vm=new Vue({
el:"#demo",
data:obj
})
</script>
v-text 更新数据，会覆盖已有结构
v-show 根据值的真假，切换元素的display属性
v-else-if 多条件判断，为真则渲染
v-for 基于源数据多次渲染元素或模板块
v-pre 跳过元素和子元素的编译过程
v-html 可以解析数据中的html结构
<div id="demo">
<span v-html="html"></span> <!--渲染后显示在页面中为：hello-->
</div>
<script>
let obj={ //数据
html:"<div>hello</div>"
}
var vm=new Vue({
el:"#demo",
data:obj
})
</script>
v-if 根据值的真假，切换元素会被销毁，重建
v-else 条件都不符合渲染
v-once 只渲染一次，随后数据更新不重新渲染
渲染：
声明式渲染-只需要声明在哪里做什么，而无须关心如何实现 & 命令式渲染-需要以具体的代码表达在哪里做什么，怎么实现
var arr=[1,2,3,4,5] //求数组中每一项的倍数，然后放入另一个数组中
/* //命令式地渲染
var newArr=[];
for(var i=0;i<arr.length;i++){
newArr.push(arr[i]*2);
}
*/
//声明式渲染
var newArr=arr.map(function(item){
return item*2 ;
});
console.log(newArr);
模版
html模板：基于dom的模板，模板都是可解析的有效的html
插值：
文本--使用双大括号{{value}} 替换实例上的属性值，当值改变时，插值内容处会自动更新
原生的html--双大括号输出的是文本，不会解析html
<div id="demo">
<span>{{html}}</span> <!--渲染后显示在页面中为：<div>hello</div>-->
</div>
<script>
let obj={ //数据
html:"<div>hello</div>"
}
var vm=new Vue({
el:"#demo",
data:obj
})
</script>
!-如果想将文本解析为html，输出hello，需要使用v-html
<div id="demo">
<span v-html="html"></span> <!--渲染后显示在页面中为：hello-->
</div>
<script>
//数据
let obj={
html:"<div>hello</div>"
}
var vm=new Vue({
el:"#demo",
data:obj
})
</script>
属性-使用v-bind进行绑定，可以响应变化
<div id="demo" v-bind:custom="abc"><!--可以通过v-bind绑定自定义属性-->
<div v-html="html"></div><!--//v-html指令将文本解析成html-->
</div>
<script>
let obj={ //数据
html:"<div>hello,miaov</div>",
abc:1
}
var vm=new Vue({
el:"#demo",
data:obj
})
</script>
javascript表达式-
<div id="demo">
{{3+6}}
{{true ? "yes" : "no"}}
</div>
<script>
var vm=new Vue({
el:"#demo",
});
</script>
字符串模板-template字符串，template选项对象的属性，模板将会替换挂载的元素。挂载元素的内容都将被忽略。（模板和template不能共存）
<div id="demo">
<span>miaov ketang</span>
</div>
<script>
let obj={
html:"<div>hello,miaov</div>",
abc:1
};
var str="<div>hello，{{abc}}</div>"
//根节点只能有一个，即不能有并列的元素标签，但可以有包含的元素标签
var vm=new Vue({
el:"#demo",
data:obj,
template:str /*将新渲染的str替换掉前面的整个div*/
})
</script>
render模板-
<div id="demo"></div>
<script>
let obj={
html:"<div>hello</div>",
abc:1
}
var vm=new Vue({
el:"#demo",
data:obj,
render:function(createElement){
return createElement(
"ul",
[
createElement("li",1),
createElement("li",2),
createElement("li",3)
]
);
}
});
</script>
未完待续。。。。
标签：ons 使用 return turn html 表达 v-on 基于 挂载
原文地址：http://www.cnblogs.com/haimengqingyuan/p/6927900.html
