本文介绍了Vue的基础知识，从Vue实例的创建到模板语法的使用，包括{{}}插值语法和指令如v-bind。深入探讨了数据绑定，分为单向和双向数据绑定，并讲解了el与data的两种不同写法。最后回顾了Object.defineProperty在Vue中的应用。
Vue初始
1. 了解vue
- 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
- root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
- root容器里的代码被称为【Vue模板】；
例子如下：
//创建vue实例
new Vue({
el:’’, //通常写的是css的选择器，也可以写document.getElementById(‘root’);
data:{ //用于存储对象，数据供el所指的容器去使用
//值暂时写成对象，组件的时候用的是函数
}
})
<!-- 引入vue -->
<script src="../vue.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
<h1>hello ,{{name}}</h1> //插值语法
<h1>我的年龄 ,{{age}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const x = new Vue({
el: '#root',
data: {
name: '刘博清',
age: 18
}
});
</script>
</body>
注意事项：
- Vue实例和容器是对应的；不可以一个容器对应多个Vue实例，也不可一个Vue实例对应多个容器
- 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
- {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
- 一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新；
2. {{里面写什么}}插值语法
必须写js的表达式
-
表达式
会生成一个值，可以放到任何一个需要值的地方，所有的表达式都有返回值
（1）a
（2）a+b
（3）dome（1）
（4）x===y ？‘a’ : ‘b’
-
代码片段
（1）if（）{}
（2）for( ; ; ){}
3. 模板语法
3.1. 插值语法
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达武，且可以直接读取到data中的所有属性。
3.2. 指令语法
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到Vue实例data中的所有属性。
v-bind:可以给任何标签里的任何一个属性动态的去绑定值，只不过实现的是数据的单向绑定
v-bind:可以简写为 ：
什么时候用插值，什么时候用指令
- 渲染
标签体内的值使用插值语法- 渲染
标签属性里的值就用指令语法
Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举例
3.3 数据绑定
3.3.1单向数据绑定
v-bind:
- 单向数据绑定，只实现Vue实例data数据到页面的绑定，但是页面的数据改变不影响Vue实例中的data属性
代码如下：
<body> <div id="root"> 单向数据绑定： <input type="text" v-bind:value="name"> <br/> 双向数据绑定： <input type="text" v-model:valuxe="name"> <h2 v-model:x="x">你是猪</h2> </div> <script type="text/javascript"> new Vue({ el: '#root', data: { name: '尚硅谷', x: '你好' } }) </script> </body>效果如下：
改变root中的data属性，那么页面会有如下效果
为页面的输入框输入值时，data中的数据并没有改变
3.3.2 双向数据绑定
v-model:
- 只能运用在表单类元素上实现数据双向绑定，换句话说就要是运用有value标签值的标签中用这些。
- 不能绑定在其他的元素上，会报错
- 如果给别得标签绑定这些，那么那个标签的属性将没有
代码见v-bind验证时的代码，都写在一起啦
注意事项：
v-model:value：可以简写为v-model，因为v-model默认收集的就是value值<input type="text" v-model="name">
4 el与data的两种写法
4.1.el有2种写法
- new Vue时候配置el属性。
- 先创建Vue实例，随后再通过vm.$mount("#root")指定el的值。
const v = new Vue({
// el: '#root' //第一种写法，new的时候就想好为那个绑定
data: {
name: '尚硅谷',
}
});
console.log(v)
v.$mount('#root'); //将js挂载到页面上，mount有挂载的意思
4.2.data有2种写法
-
对象式
-
函数式
new Vue({ el: '#root', //data的第一种写法：对象式 // data: { // name: '尚硅谷', // } //data的第二种写法：函数式，以后在学习组件的时候就必须用这个 data: function() { console.log('@@@@@', this) //此处的this是Vue实例对象 return { name: '尚硅谷' } } })如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。 .
-
一个重要的原则： 由Vue管理的函数, 定不要写箭头函数， 一旦写了箭头函数，this就不在是Vue实例了。而是window实例了。
注意事项：一般情况下会将data写成
data() { console.log('@@@@@', this) //此处的this是Vue实例对象 return { name: '尚硅谷' } }
5.MVVM模型
- M：模型：对应data的数据
- V：视图：模板，也就是页面
- VM：视图模型：Vue实例
观察发现：
- 这里的vm就是vue的实例
- data中所有的属性，最后都出现在了vm身上。
- vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
6.回顾Object.defineProperty(某个对象，需要添加的对象属性，值是一个对象类型的)
<body>
<script type="text/javascript">
let person = {
name: '张三',
sex: '男'
}
//这样加进去的属性，不可被枚举，其实就是不能被遍历
let number = 18;
Object.defineProperty(person, 'age', {
// value: 18,
// enumerable: true, //控制属性可枚举
// writable: true, //控制属性可被修改
// configurable: true, //控制属性可被删除
get: function() {
//当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是这个属性的值
return number;
},
//当有人修改person的age属性时，set函数（setter）就会被调用，且读取到的值就是这个属性的值
set: function(value) {
console.log('修改后的值是', value)
}
})
console.log(person);
</script>
</body>
效果如下所示：
遍历对象的两种方式
1. //object的keys函数 console.log(Object.keys(person)); 2. //for in遍历 for (key in person) { console.log('@@@@@', key) }
扫一扫
705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
