Vue基础知识一
1、模板语法
（1）插值语法——容器中的两个{}
用于解析标签体(即开始标签和结束标签间的内容)：{{xxx}},xxx是表达式且可以读取data中的所有属性
（2）指令语法——用于解析标签(包括标签属性、标签体内容、绑定事件......)
v-bind:可以简写成:
Vue中有很多指令，形式为v-???，此处拿v-bind举例
<body>
<!-- 准备一个容器 -->
<div id="root">
<h1>指令语法</h1>
<a v-bind:href="url">vue官网1</a>
<a :href="url">vue官网2</a>
</div>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false
//创建Vue实例
var vm = new Vue({
//el用于指定当前vue实例为哪个容器服务，值通常是css选择器字符串
el: '#root',
data: {
// data中用于存储数据，数据供el所指定的容器去使用\
// 值暂时写成一个对象，在组件中写成一个函数
name : 'ljl',
url: 'https://cn.vuejs.org/'
}
})
</script>
</body>
2、数据绑定
（1）单向数据绑定——v-bind，数据只能从data流向页面
（2）双向数据绑定——v-model:v-model只能应用在表单类元素(输入类元素)：有value值上，因此v-model:value可简写为v-model
<div id="root">
单向数据绑定：<input type="text" v-bind:value="name"><br>
双向数据绑定：<input type="text" v-model:value="name">
</div>
注意：el和data的另外写法：data的第二种写法函数式(学习组件后必须使用函数式)不能写成箭头函数
浙公网安备 33010602011771号