vue的相关概念
概念
1、创建 Vue 实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:
let app = new Vue({
});
在构造函数中传入一个对象,并且在对象中声明各种 Vue 需要的数据和方法,包括:
- el
- data
- methods
等等 接下来我们一 一介绍。
2、模板或元素
每个 Vue 实例都需要关联一段 Html 模板,Vue 会基于此模板进行视图渲染。 我们可以通过 el 属性来指定。 例如一段 html 模板:
<div id="app">
</div>
然后创建 Vue 实例,关联这个 div
let vm = new Vue({
el: "#app"
})
这样,Vue 就可以基于 id 为`app`的 div 元素作为模板进行渲染了。在这个 div 范围以外的部 分是无法使用 vue 特性的。
3、数据
当 Vue 实例被创建时,它会尝试获取在 data 中定义的所有属性,用于视图的渲染,并且监 视 data 中的属性变化,当 data 发生改变,所有相关的视图都将重新渲染,这就是“响应式“系统。
<div id="app">
<input type="text" v-model="name" />
</div>
JS:
let vm = new Vue({
el: "#app",
data: {
name: "刘德华"
}
})
name 的变化会影响到`input`的值 input 中输入的值,也会导致 vm 中的 name 发生改变
4、方法
Vue 实例中除了可以定义 data 属性,也可以定义方法,并且在 Vue 实例的作用范围内使用。
<div id="app">
{{num}}
<button v-on:click="add">加</button>
</div>
let vm = new Vue({
el: "#app",
data: {
num: 0
},
methods: {
add: function () {
// this 代表的当前 vue 实例
this.num++;
}
}
})
安装 vue-devtools 方便调试
打开浏览器控制台,选择 vue
安装 vscode 的 vue 插件
安装这个插件就可以有语法提示
指令
什么是指令? 指令 (Directives) 是带有 `v-` 前缀的特殊特性。 指令特性的预期值是:单个 JavaScript 表达式。 指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。例如我们在入门案例中的 v-on,代表绑定事件 格式:{{表达式}} 说明: 该表达式支持 JS 语法,可以调用 js 内置函数(必须有返回值) 表达式必须有返回结果。例如 1 + 1,没有结果的表达式不允许使用,如:let a = 1 + 1; 可以直接获取 Vue 实例中定义的数据或函数 。
相关文章
- 尚硅谷Vue课程P30-P35笔记(后台回复 vue 可获得更多笔记!)
- Vue响应式原理基本理解实现[通俗易懂]
- Vue父子组件传值的方法[通俗易懂]
- vue中引入高德地图并多点标注
- 最佳实践:vue组件引用传值(续篇)
- Vue(27)vue-codemirror实现在线代码编译器「建议收藏」
- html使用vue axios,使用 Vue和axios
- axios挂载到vue项目中一些优化问题
- vue-cli 初始----安装运行Vue项目
- Vue的基本使用
- VUE 初学者基础知识
- VUE组件封装_vue使用组件
- VUE组件封装_vue组件内部双向绑定
- vue业务组件封装_怎么去设计一个组件封装
- vue父组件调用子组件属性_vue子组件获取父组件实例
- vue中使用定时器setInterval
- IntelliJ IDEA使用 vue-cli 创建Vue项目
- VUE入门 生命周期 计算属性 监听器 组件【2】
- Vue写一些试题样式
- 【Vue】手拉手带你走进Vue大门(概念&指令)
- 优雅的Vue请求Redis驱动的高性能服务(vue请求redis)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)