Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录
- 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染
- 2. 插值表达式{{}}
- 3. 访问数据和修改数据
- 4. vue响应式
- 5. Vue开发者工具--方便调试
1.Vue2上手-如何创建一个Vue实例,进行初始化渲染
- 准备容器
- 引包
- 创建Vue实例 new Vue()
- 指定配置项 ->渲染数据
准备一个容器,例如:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div>
</body>
</html>
引入Vue2开发版
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
创建 Vue 实例
const app=new Vue({})
指定配置项
- 挂载 el (挂载到哪个容器上)
- 数据 data (渲染的数据值是什么)
const app = new Vue({el: '#app',data:{msg: 'hello world'}})
完整小实例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">{{msg}}</div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data:{msg: 'hello world'}})</script>
</body>
</html>
结果如下:
2. 插值表达式{{}}
通过{{实例中的数据}},来进行页面的渲染
注意:
- 使用的数据要存在
- 支持表达式
例如
{{age>=18?‘成年’:‘未成年’}}
{{msg+‘你好’}}
- 不能再标签属性中使用{{}},不能在<>这个内部使用,如title=“xxx”,xxx 不能是渲染的数据
3. 访问数据和修改数据
- 访问数据 --实例.属性名
- 修改数据 --实例.属性名=“值”
console.log(app.msg);
app.msg = "123";
console.log(app.msg);
4. vue响应式
什么是响应式"?
数据改变,视图自动更新.
使用 Vue 开发 专注于业务的核心逻辑
通过修改数据,被 vue 监听到,然后自动进行 dom 操作,更新视图
5. Vue开发者工具–方便调试
为了方便进行调试,下载 Vue 开发者工具
这里以 Vue 为例,下载的是历史版本的开发者工具,
安装步骤看下面的文章
Vue2在GoogleChrome使用vue-devtools插件
安装后效果如图:
