模板语法
-
标签语法
-
//在.html文件中 <body><h3>{{name}}</h3> </body> <script>new Vue({el:'#root',data:{name:'jack',url:'网页地址'}}) </script> -
指令语法
-
标签语法和指令语法的简单区分，就是指令语法用v-on,v-bind,v-model指令进行动态绑定。
-
//在.html文件中 <body>//点位这个词的位置为标签体<a :href="url">点位</a>// <a :href="url.toUpperCase()"></a>// <a :href="url.Date.now()"></a>// toUpperCase()让网页字母大写// Date.now()获取当前的时间戳 </body> <script>new Vue({el:'#root',data:{name:'jack',url:'网页地址'，//避免name重名可以设计多层，school.name于nameschool: {name: 'marray'}}}) </script>数据绑定
-
v-bind可以简写成冒号，只能从data流向页面。而v-model不仅可以从data流向页面，也可以页面刘翔data
-
//单项数据绑定 <input type="text" v-bind:value = "name" ><br> //双向数据绑定 <input type="text" v-model:value = "name" ><br> -
v-model只能应用于表单类元素，如：input、select
-
v-model：value可以简写成v-model.v-model默认就是value值
el 和 data 的两种写法
-
el的第一种写法，data的第一种写法
-
<script>const v = new Vue({el:'#root',data: {name: '蜜瓜'} }) </script> -
el的第二种写法，data的第二种写法
-
data的第一种写法不用在vue中。
-
<script> const v = new Vue({// el:'#root',//此处的function()不可用箭头函数（=>）代替，因为箭头函数所指示的是window。也就是，this不是vue实例对象了data:function(){//data中的this是vue实例对象，vue中提供自身运行的文件与带$号，程序员用的文件console.log(this)return{name: '米国'}} }) console.log(v) setTimeout(()=>{//$mount为挂载的意思，1000延迟显示1秒钟.此处为el的第二种写法。v.$mount('#root'),1000 }) </script> -
MVVM模型
-
mvvm模型是vue作者参考后，创建的Vue
-
M：模型，对应data的数据
-
V: 视图，模板，对应DOM页面
-
VM: 视图模型，对应Vue实例对象
-
在Vue中V通过VM与M进行双向绑定，M的数据改变V的数据也进行改变
-
MVVM代码对应如下
-
<body>// div包裹的代码为V视图<div><h1>{{name}}</h1></div> </body> <script>//new Vue为VM视图模型const vm = new Vue({el: '#root',//data对象包裹的区域为M模型，data: {name: '小米',}}) </script> -
M模板的属性和vm，都可以直接在V视图中直接使用。
--MPC57xx是如何支持标定的页切换)
![P1547 [USACO05MAR] Out of Hay S 题解](http://pic.xiahunao.cn/P1547 [USACO05MAR] Out of Hay S 题解)
