MVVM框架
我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变，简而言之，MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，无需写代码，非常棒的一个改进。这是javascript，jquery，bootstrap等无法做到的，也是前端Vue推崇的原因，也标示着jquery的终结。
- 方法必须写在methods代码段中
- 方法体中访问数据代码段中声 明的变量，前面加this
- 方法和属性声明方式的差异在于 function(){}
- 方法和属性调用的差异是 {{msg}} {{sayHello()}}，名称后加小括号
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<script src="js/vue.js" type="text/javascript">?? ??? ??? ?
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ?<div id="app">
?? ??? ??? ?<p>加法{{2+3}}</p>
?? ??? ??? ?<p>加法{{2*3}}</p>
?? ??? ??? ?<p>字符串操作{{str.length}}</p>
?? ??? ??? ?<p>三元运算符{{age>10?true:false}}</p>
?? ??? ??? ?<p>{{p.name+p.age}}</p>
?? ??? ??? ?<button οnclick="alert(100)">普通按钮</button>
?? ??? ??? ?<button v-on:click="show()">无参方法</button>
?? ??? ??? ?<button v-on:click="syso(10)">有参方法</button>
?? ??? ?</div>
?? ??? ?<script type="text/javascript">
?? ??? ??? ?new Vue({
?? ??? ??? ??? ?el:"#app",
?? ??? ??? ??? ?data:{
?? ??? ??? ??? ??? ?str:"hellovue!",
?? ??? ??? ??? ??? ?age:12,
?? ??? ??? ??? ??? ?p:{//vue定义对象
?? ??? ??? ??? ??? ??? ?name:"lisi",
?? ??? ??? ??? ??? ??? ?age:20
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
?? ??? ??? ??? ?//无参函数
?? ??? ??? ??? ?//含参函数
?? ??? ??? ??? ?methods:{
?? ??? ??? ??? ??? ?show:function(){
?? ??? ??? ??? ??? ??? ?alert("show方法")
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?syso:function(dd){
?? ??? ??? ??? ??? ??? ?alert(dd)
?? ??? ??? ??? ??? ?}?? ??? ??? ?
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?/*data第二张写法 定义函数,返回对象? */
?? ??? ??? ??? ?/* data:function(){
?? ??? ??? ??? ??? ?return{
?? ??? ??? ??? ??? ??? ?str:"hellovue!",
?? ??? ??? ??? ??? ??? ?age:12,
?? ??? ??? ??? ??? ??? ?p:{//vue定义对象
?? ??? ??? ??? ??? ??? ??? ?name:"lisi",
?? ??? ??? ??? ??? ??? ??? ?age:20
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}, */
?? ??? ??? ??? ?// 第三种形式:定义函数,es6的简写法
?? ??? ??? ??? ?/* data(){
?? ??? ??? ??? ??? ?return{
?? ??? ??? ??? ??? ??? ?str:"hellovue!",
?? ??? ??? ??? ??? ??? ?age:12,
?? ??? ??? ??? ??? ??? ?p:{//vue定义对象
?? ??? ??? ??? ??? ??? ??? ?name:"lisi",
?? ??? ??? ??? ??? ??? ??? ?age:20
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?} */
?? ??? ??? ?})
?? ??? ?</script>??
?? ?</body>
</html>
高级用法：v-指令
指令用于在表达式的值改变时，以表示它们是Vue提供的特殊特征
可以直接用于在表达式的值改变时，将某些行为应用到DOM上。
双向绑定 v-model
通过指令v-model。实现双向绑定，修改一方的同时修改相同的另一方，达到数据同时更新。
MVVM是将"数据模型双向绑定"的思想作为核心，在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此View视图的数据的变化会同时修改Model数据源，而Model数据源数据的变化也会立即反应到View视图上。
闪现 v-cloak
F12打开Chrome的调试窗口，选中NetWork，在选择Slow3G，观察问题。
遇到插值表达式加载时闪烁对用户不好的现象，那怎么解决呢？
- ??? 在标签中增加指令：v-cloak
- ??? 增加style标签，[v-cloak]属性选择器，设置先不展示display:none;
?
判断 v-if
v-if指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素
Tip: 什么时候用 v-if ，什么时候用v-show?
v-show靠页面的样式进行控制，未显示但内容已在页面上，而v-if内容是不在的
v-if判断是否加载，可以减轻服务器的压力，但在需要时加载有更高的切换开销；v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
循环 v-for
v-for 指令可以绑定数组的数据来渲染一个项目列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript">
</script>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<h1>{{msg}}</h1>
<div id="app" v-cloak>
<input type="text" v-model="msg"/>
<h2>{{msg}}</h2>
<h3>{{msg}}</h3>
<h4>{{msg}}</h4>
<h5>{{msg}}</h5>
<h6>{{msg}}</h6>
<input type="text" v-model="age"/>
<p v-if="age>=60">老人</p>
<p v-else-if="age>=30">成年人</p>
<p v-else-if="age>=18">青少年</p>
<p v-else>小学生</p>
<h1>{{age}}</h1>
<p v-for="arr in arr">{{arr}}</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:'生在红旗下,长在春风里！',
age:"",
arr:["唱","跳","rap"],
}
})
</script>
</body>
</html>
事件 v-on
@click为v-on:click的缩写
绑定 v-bind
当属性的值是变量而不是字符串时，通过v-bind进行标识，vue会自动处理
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<script src="js/vue.js" type="text/javascript">
?? ??? ??? ?
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ?<div id="app">
?? ??? ??? ?<button type="button" v-on:click="show()">show方法</button>
?? ??? ??? ?<button type="button"><a v-bind:href="url">百度</a></button>
?? ??? ?</div>
?? ??? ?<script type="text/javascript">
?? ??? ??? ?new Vue({
?? ??? ??? ??? ?el:"#app",
?? ??? ??? ??? ?data:{
?? ??? ??? ??? ??? ?show:function(){
?? ??? ??? ??? ??? ??? ?alert("show方法")
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?url:"https://www.baidu.com"
?? ??? ??? ??? ?}
?? ??? ??? ?})
?? ??? ?</script>
?? ?</body>
</html>
?
|