模板语法:
Vue板块语法2大类:
1.插件语法:
功能用于解析标签内容
写法:{{xxx}} xxx是js表达式,且可以直接读取到data中所有属性
2.指令语法:
功能:用于解析标签(包括:标签属性 标签体内容 绑定事件....)
举例:v-bind:href="xxx" 或简写为":href="xxx" xxx同样要写js表达式
且可以直接读取到datad中所有属性.
备注;Vue中有很多的指令 且形式都是:v-??? 此处我们只是拿v-bind举个例子
<script>
<div id="root">
<h1>插值语法</h1>
<h3>你好,{{name }}</h3>
<hr/>
<h1>指令语法</h1>
<a v-bind:href="school.url.toUpperCase()">点{{school.name}}一下下</a>
<a :href="school.url">点一下下</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue ({
el:'#root',
data:{
name:'大苏打',
school:{
name:"浮点数的",
url:'http://www.baidu.com',
}
}
})
</script>
效果图:
数据绑定
Vue中有2种数据绑定的方式:
1.单向绑定(v-bind):数据只能从data流向页面
2.双向绑定(v-model):数据不仅能从data流向页面 还可以从页面流向data
备注:
1.双向绑定一般都应用在表单类元素上(如:input selec)
2.v-model:value 可以简写成v-model因为v-model默认收集的就是value值
准备好一个容器
<div id="root">
单项数据绑定:<input type="text" v-bind:value="name"><br>
双项数据绑定:<input type="text" v-model:value="name">
<!-- 简写 -->
单项数据绑定:<input type="text" :value="name"><br>
在input标签里面修改内容无法传到Root中
双项数据绑定:<input type="text" v-model="name">
在input标签里面修改内容传到Root中同时修改