实现步骤:
1. 下载和引入vue.js文件
2. 创建div做为视图,id为div
3. 编写JS脚本,创建Vue对象,传入对象为构造方法参数
1). 指定el属性值:为上面的#div,这是一个ID选择器,用于指定视图区域,此区域下的所有表达式、事件等内容都会受到vue的控制。
2). 指定data属性:设置一个msg的键和值;用于保存当前 Vue 对象中的数据。这里设置的数据是初始化数据, 这里的数据改变,引用的地方也会改变
3). methods 选项:用于定义方法。方法可以直接通过对象名调用,也可以在方法内部通过this来调用。
4. 在上面的div中使用{{msg}}引用数据,格式:{{变量名}}
常用指令
l
指令:是带有
v-
前缀的特殊属性,不同指令具有不同含义。例如
v-html
,
v-if
,
v-for
。
l
使用指令时,通常编写在标签的
属性上
,值可以使用
JS
的
表达式
。
![](https://i-blog.csdnimg.cn/blog_migrate/a5bd3ed034a0906d795179356e358e39.png)
l
指令:是带有
v-
前缀的特殊属性,不同指令具有不同含义。
l
文本插值
v-html:把文本解析为 HTML 代码。 v-text:纯文本原样输出
l
绑定属性
v-bind:为 HTML 标签绑定属性值。
l
条件渲染
v-if:条件性的渲染某元素,判定为真时渲染,否则不渲染。
v-else:条件性的渲染。
v-else-if:条件性的渲染。
v-show:根据条件展示某元素,区别在于切换的是 display 属性的值。
l
列表渲染
v-for:列表渲染,遍历容器的元素或者对象的属性。
l
事件绑定
v-on:为 HTML 标签绑定事件。 简写:@事件名
l
表单双向绑定
v-model:在表单元素上创建双向数据绑定。
生命周期
创建阶段
运行阶段
销毁阶段