目录
一、安装
用 <script>
标签引入,Vue
会被注册为一个全局变量。
# CDN
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
二、Vue实例结构
包括视图+脚本
视图中有div标签,声明 {{变量}}
脚本<script>,包含js。
创建实例化对象。对象包含属性:el元素 data数据(注册变量并初始化赋值)
<!--声明渲染-->
<!--视图标签-->
<div id="app">
<!--变量-->
{{message}}
</div>
<!--脚本标签-->
<script>
<!--全局变量Vue、对象app、属性el data-->
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!"
}
});
</script>
三、实例结构
1、条件 v-if
2、循环 v-for
3、处理用户输入
v-on:事件监听器,通过它调用在 Vue 实例中定义的方法
v-model:实现表单输入和应用状态之间的双向绑定
v-bind 指令将待办项传到循环输出的每个组件中
4、数据与方法
响应式系统:
实例创建时,data中的property是响应式的 。数据改变时,视图重新渲染,若添加新的property 不会触发视图更新。
例外是使用 Object.freeze()
,这会阻止修改现有的 property,也意味着响应系统无法再追踪变化。
属性与方法:某些 property 与方法有前缀 $
,以便与用户定义的 property 区分开来。可以在 API 参考中查阅到完整的实例 property 和方法的列表。
5、生命周期钩子
created
钩子可以用来在一个实例被创建之后执行代码。还有如 mounted
、updated
和 destroyed
。生命周期钩子的 this
上下文指向调用它的 Vue 实例。
不要在选项 property 或回调上使用箭头函数,比如
created: () => console.log(this.a) 或
vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this,this 会作为变量一直向上级词法作用域查找,直至找到为止,经常导致
Uncaught TypeError: Cannot read property of undefined 或
Uncaught TypeError: this.myMethod is not a function 之类的错误。
生命周期图示
四、模板语法