目录
Vue是什么
概念:Vue 是一个用于构建用户界面的渐进式框架
构建用户界:基于数据动态渲染 页面
渐进式:循序渐进的学习
框架:一套完整的项目解决方案,提升开发效率个(理解记忆规则)
规则 ---> 官网
创建一个Vue实例
构建用户界面 ---> 创建Vue实例初始化渲染 -----> 核心步骤 4步:
1.准备容器 2.引包(官网)-开发版本 3.创建Vue实例 new Vue()4.指定配置项 ----> 渲染数据
-
准备容器
2.引包(官网)-开发版本
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
3.创建Vue实例 new Vue()
java//一旦引入VueJs核心包,在全局环境,就有了Vue构造函数 const app = new vue({ })
4.指定配置项 ----> 渲染数据
el :指定挂载点
data:提供数据
html<div id="app"> <!-- 编写用于渲染的代码逻辑 --> // 插值表达式 {{msg}} <div> <script> //一旦引入VueJs核心包,在全局环境,就有了Vue构造函数 const app = new vue({ //通过 el 选择器指定vue管理的盒子 el:'#app' , //通过data提供数据 data:{ msg:'hello vue' } }) </script>
总和示例:
html<!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> <!-- 创建Vue实例,初始化渲染 1.准备容器(Vue所管理的范围) 2.引包 3.创建实例 4.添加配置项=>完成渲染 --> <!-- 1.准备容器(Vue所管理的范围)--> <div id="app"> <!-- 编写用于渲染的代码逻辑 --> <!-- 插值表达式 --> {{msg}} <h1>{{head}}</h1> </div> <!-- 引入开发版本包 (包含完整的警告和注释)--> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> //一旦引入VueJs核心包,在全局环境,就有了Vue构造函数 const app = new Vue({ //通过 el 选择器指定vue管理的盒子 el:'#app' , //通过data提供数据 data:{ msg:'hello vue' , head :'day' } }) </script> </body> </html>
插值表达式
插值表达式是一种Vue的模板语法
1.作用:利用表达式进行插值,渲染到页面中
表达式:是可以被求值的代码,js引擎会计算出一个结果
表达式举例:
2.语法:{{ 表达式 }}
html<h3>{{ nickname }} </h3> <p>{{ nickname.toUpperCase() }}</p> <p>{{age >= 18 ? '成年' : '未成年' }}</p> <p>{{ obj.name}}</p>
3.注意点
表达式 :表达式是代码的片段,它计算并返回一个值。
核心特征:会产生一个值。
语句 :语句是执行操作的指令。它本身不产生值,而是用来组织和控制程序的流程
核心特征:完成一个任务,但不直接产生可用于赋值或传递的值
举例:
html<!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> <!-- 插值表达式:Vue的一种模板语法 作用:利用表达式进行插值渲染 语法:{{表达式}} 注意点: 1.使用的数据要存在 2.支持表达式,不支持语句 if for 3.不能在标签属性中使用{{ }} --> <div id="app"> <h3>{{ nickname }} </h3> <p>{{ nickname.toUpperCase() }}</p> <p>{{age >= 18 ? '成年' : '未成年' }}</p> <p>{{ obj.name }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> const app = new Vue({ el:'#app' , data:{ nickname:'hello' , age:18, obj:{ name:'张三' } } }) </script> </body> </html>
响应式特性
我们已经掌握了基础的模板渲染,其实除了基本的模板渲染,Vue背后还做了大量的工作。
比如:数据的响应式处理 -----> 响应式:数据变化,视图自动更新
如何访问 or 修改? data中的数据,最终会被添加到实例上。
-
访问数据 :" 实例.属性名 "
-
修改数据:"实例.属性名" = ''值'
-