文章目录
Vue学习思路
Vue的两大功能
- 指令
- 组件系统
通过Vue操作DOM
- 问题: Vue中不建议像二阶段一样直接去操作DOM
- 解决方案: 通过指令操作
引入vue的CDN
开发环境CDN
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
生产环境CDN
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
Vue构造函数
console.log( Vue )
// 得到以下代码
ƒ Vue (options) {
if (!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options);
}
options
- options中可以写的属性在官网的api中带有选项字眼的属性
实例化Vue
通过vue中的el生成并且对其进行操作的元素是虚拟DOM,但并不是说该元素真的是虚拟不存在的,通过 console.log 也能在浏览器引擎中找到该元素,虚拟DOM的意思是通过vue操作的元素叫虚拟DOM
- html代码
<body>
<div id="app"> //虚拟DOM
<p>{{ this.item }}</p>
<p>{{ this.$data.item }}</p>
<p>{{ this._data.item }}</p>
<p>{{ item }}</p> //简写格式
</div>
</body>
- js代码
- 代码中
- vm 就是 VM 视图模型:就是实例或者对象
- el 就是 V 视图
- data 就是 M 数据
const vm = new Vue({
el: '#app', //el不能是body或者是html, 否则会报错
data:{
msg: 'Hello Vue.js'
}
})
-
id为app的div是假的DOM,只是一个模板 --> 类似ejs中的模板,但是ejs中是用它自己的模板格式。而Vue中是直接用原生的元素标签作为模板格式。
-
el的作用
- 为实例vm规定一个使用的范围,只能在#app的范围内使用
- 为实例vm提供了一个模板
- data的作用
- 规定一个数据
- data的数据使用范围必须在#app中,其他地方就没有Vue的效果了
- data中定义的数据在模板中相当于全局变量,直接可以使用
-
Vue为了能够让我们在模板中使用js语法,提供了一个语法糖,这个语法糖叫做 mustache ,别名:{{ 双大括号语法 }}
-
私有属性 [ 继承属性 ] : _ # $
-
vm 作为根实例 【 根组件 】
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
