目录
二、创建Vue实例 随后通过v.$mount("#")指定el的值
Vue中有两种绑定方法
单向数据绑定
双向数据绑定
v-bind:单项数据绑定
数据只能从data流向页面(当data数据发生改变页面渲染也会发生改变,但是当页面发生改变data数据并不会发生改变)
v-model:双向数据绑
数据不仅能从data流向页面,还可以从页面流向data(当data数据发生改变页面渲染也会发生改变,当页面value值发生改变data数据也会发生改变)
v-model:value 可以简写为 v-model 因为v-model默认收集的是value值
注意知识点:
v-model指令只能运用在输入类标签元素 (例如表单里的:input 单选框 多选框 多行输入等) 需要有value值 因为除输入类标签元素 其余标签例如h1...h6用户无法输入 无法捕获用户输入的值 所以无法实现双向数据绑定
v-bind和v-model简写:
<body>
<div id="app">
<!-- 单向数据绑定:<input type="text" v-bind:value="obj"><br> -->
<!-- v-bind简写 -->
单向数据绑定:<input type="text" :value="obj"><br>
<!-- 双向数据绑定:<input type="text" v-model:value="obj"> -->
<!-- v-model简写 -->
双向数据绑定:<input type="text" v-model="obj">
</div>
</body>
<script src="./vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
obj: "我是铁甲小宝"
}
})
</script>
二、Vue el的两种写法
el有两种写法:
1、new Vue的时候配置el属性
2、创建Vue实例 随后通过v.$mount("#")指定el的值
一、new Vue的时候配置el属性
<body>
<div id="app">
<h1>你好,我是{{name}}</h1>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
new Vue({
// 第一种挂载写法
el: "#app",
data: {
name: "张张"
}
})
</script>
效果图:
二、创建Vue实例 随后通过v.$mount("#")指定el的值
<script src="./vue.min.js"></script>
<script>
// 第二种挂载写法
const vm = new Vue({
// 第一种挂载写法
// el: "#app",
data: {
name: "张张"
}
})
vm.$mount("#app")
</script>
两种挂载方式的结论:
$mount 为手动挂载,在项目中可用于延时挂载(例如在挂载之前要进行一些其它操作 , 判断等) , 之后要手动挂载上 . new Vue时 , el和 $mount 并没有本质上的不同;
vue对象属于‘未挂载’状态,需要手动指定挂载,在对象后面 .$mount()加上dom元素。简单一句话来概括的话就是生命周期路线的不同,但是没有影响。
三、Vue data的两种写法
data有两种形式
1、函数式
2、对象式
一、函数式
注意:data函数式不能写成箭头函数 因为箭头函数没有自己的this 会往全局查找到window
<div id="app">
<h1>我是{{name}}</h1>
</div>
<script src="./vue.min.js"></script>
<script>
new Vue({
el:"#app",
// 函数式
data() {
// 必须要return出一个
return {
name:"张张"
}
},
})
</script>
二、对象式
<script>
new Vue({
el: "#app",
// 对象式
data: {
name: "张张张"
}
})
</script>
data两种方式总结:
1、目前两种写法均可 但是组件里的data必须是函数式 不然会报错
2、由Vue管理的函数不要写箭头函数 写了箭头函数this就不是Vue实例了