vue模板语法
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
2.root容器里的代码（也叫vue模板）依然符合html规范，只不过混入了一些特殊的Vue语法
3.Vue实例与容器是一一对应的
4.真实开发中只有一个Vue实例，并且会配合着组件一起使用
5.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
6.自动更新：一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新
插值语法
功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有区域
指令语法
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：<a v-bind:href="xxx">或简写为<a :href="xxx">，xxx同样要写js表达式，且可以直接读取到data中的所有属性
备注：Vue中有很多的指令，且形式都是v-???，此处我们只是拿v-bind举个例子
数据绑定
<body>
<div id="root">
单向数据绑定：<input type="text" v-bind:value="name"><br>
双向数据绑定：<input type="text" v-model:value="name">
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'手写公式识别'
}
})
</script>
</body>
- 单向绑定（
v-bind）：数据只能从data流向页面 - 双向绑定（
v-model）：数据不仅能从data流向页面，还可以从页面流向data
el与data的写法
el的两种写法：
const vm = new Vue({
el:'#root', //第一种写法：创建Vue实例对象的时候配置el属性 data:{
name:'JOJO'
}
})
vm.$mount('#root')//第二种写法：先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
<body>
<div id="root">
<h1>Hello,{{name}}!</h1>
</div>
<script>
Vue.config.productionTip = false
//data的两种写法：
new Vue({
el:'#root',
//data的第一种写法：对象式
// data:{
// name:'JOJO'
// }
//data的第二种写法：函数式
data(){
return{
name:'JOJO'
}
}
})
</script>
</body>
3463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
