和阿牛一起冲Vue
文章目录
- 和阿牛一起冲Vue
- 前言
- 一、数据绑定有两种方法：
- 1、单项数据绑定v-bind
- 2、双向数据绑定v-model
- 二、数据绑定的便捷写法
- 总结
- 三、el与data的两种写法
- 挂载容器：
- data数据：
- 三、代码示例
- 总结
- data与el的2种写法
- 1.el有2种写法
- (1).new Vue时候配置el属性。
- (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
- 2.data有2种写法
- (1).对象式
- (2).函数式
- 3.一个重要的原则：
前言
青春，因为奋斗与奉献更美丽。
一、数据绑定有两种方法：
1、单项数据绑定v-bind
功能：用于解析标签体内容。
<input type="text" v-bind:value="name">
2、双向数据绑定v-model
注意： 双向绑定只能引用于表单类型value。
<input type="text" v-model:value="name">
备注：不是搜所有的元素都是可以写modle的。
二、数据绑定的便捷写法
单项数据绑定:
<input type="text" :value="name">
双项数据绑定:
<input type="text" v-model="name">
总结
Vue中有2种数据绑定的方式：
1.单向绑定(v-bind)：数据只能从data流向页面。
2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
三、el与data的两种写法
挂载容器：
//el的两种写法
const v = new Vue({
//el:'#root', //第一种写法
data:{
name:'尚硅谷'
}
})
console.log(v)
v.$mount('#root') //第二种写法
主要的就是：
.$mount('#root')
data数据：
// 箭头函数没有自己的this
要写成普通的函数
data: function () {
return {
name: 'jack'
}
}
需要注意的是，对象式和函数式(这个函数必须返回一个对象，必须是普通函数)
//data的两种写法
new Vue({
el:'#root',
//data的第一种写法：对象式
/* data:{
name:'尚硅谷'
} */
//data的第二种写法：函数式
data(){
console.log('@@@',this) //此处的this是Vue实例对象
return{
name:'jack'
}
}
})
三、代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">
<h1>单项数据绑定:</h1>
单项数据绑定:<input type="text" v-bind:value="name"><br />
<!-- 双向绑定只能引用于表单类型value -->
<h1>双向数据绑定</h1>
双项数据绑定:<input type="text" v-model:value="name">
单项数据绑定:<input type="text" :value="name"><br />
<!-- 双向绑定只能引用于表单类型value -->
双项数据绑定:<input type="text" v-model="name">
</div>
</body>
<script src='vue.js'></script>
<script>
Vue.config.productionTip = false;
const v = new Vue({
el: '#root',
data: {
name: 'jack',
message: {
url: 'javascript:void(0)?spm=1000.2115.3001.5343',
name: '勇敢牛牛'
}
}
/* 箭头函数没有自己的this
要写成普通的函数
data: function () {
return {
name: 'jack'
}
} */
});
console.log(v);
v.$mount('#root')
</script>
</script>
</html>
总结
data与el的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值。
2.data有2种写法
(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错.
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
