Vue的指令语法、双向绑定、el和data的另一种写法、MVVM模型

1. 指令语法

用于解析标签（包括：标签属性、标签体内容、绑定事件…）。Vue中有很多的指令，且形式都是：v-xxxx，此处我们只是拿v-bind举个例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body><div id="root"><h1>指令语法</h1><!-- 字符串中引用的是JS的表达式 --><a v-bind:href="web.url" v-bind:web-name="web.name.toUpperCase()">点我跳转到{{web.name}}</a><!-- 简写方式 --><a :href="web.url" v-bind:web-name="web.name.toUpperCase()">点我跳转到{{web.name}}</a>
</div><script type="text/javascript">new Vue({el:'#root',data:{web:{name:'baidu',url:'http://www.baidu.com'}}})</script></body>
</html>

打开页面如下。点击就可以跳转到baidu
指令语法

这一部分的网页源代码如下：

1.1 双向绑定

数据不仅能从data流向页面，还可以从页面流向data
v-model只能应用在表单类元素（输入类元素）上，如input、select等

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body><div id="root">双向数据绑定：<input type="text" v-model:value="name"><br/><!-- 可以简写为 v-model，因为v-model默认收集的就是value值 -->双向数据绑定：<input type="text" v-model="name"><br/>
</div><script type="text/javascript">new Vue({el:'#root',data:{name:'hello'}})</script></body>
</html>

运行，输入框都显示hello，在下面的输入框输入12345，上面的输入框也同步显示12345
双向绑定效果

2. el和data的另一种写法

el可以通过vm.$mount来实现。比如可以通过setTimeout来延迟挂载
data可以通过function函数来获取数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body><div id="root"><h1>你好，{{name}}</h1>
</div><script type="text/javascript">const vm = new Vue({// data的函数式写法// 简写: data(){。不能写成data:()=>{，因为箭头函数的this不是vue实例而是Windowdata:function(){// 此处的this是Vue实例对象。函数由vue自动调用console.log('@@@',this)return{name:'尚硅谷'}}})// 定时设置一秒后，将容器和vue实例绑定setTimeout(() => {// el的另一种写法vm.$mount('#root')}, 1000)</script></body>
</html>