概念
vue是是一套用于构建用户界面的渐进式JavaScript框架
特点
1 只关注视图层, 采用自底向上增量开发的设计
2 易于上手,便于与第三方库或既有项目整合
兼容性
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器
虚拟DOM
核心
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
入门案例
直接引入vue.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello VueTest!'
}
})
</script>
</html>
显示结果:Hello VueTest!
如何确定是否是响应式的
上述案例数据和DOM已经建立了关联,所有东西都是响应式的。我们要怎么确认呢?
- 打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新
通过上述入门案例可以看到:我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个HTML 是我们的入口,但其余都会发生在新创建的 Vue 实例内部
Vue实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
var vm = new Vue({
// 选项
})
所有的 Vue 组件都是 Vue 实例
数据与方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ a }}
</div>
</body>
<script type="text/javascript">
var obj={a:1234};
var vm = new Vue({
el: '#app',
data: obj
});
vm.$watch('a',function(newVal,oldVal){
console.log(newVal,oldVal);
})
// obj.a="test";
vm.a="test111";
</script>
</html>
上述案例可以看到:obj.a="test" 与通过vm来改变a属性的值都可以改变a的值
如果想要某一个属性或变量响应式的,需要在new Vue()的时候提前把这个变量进行声明
Vue实例还暴露了一些有用的实例property与方法它们都有前缀 $,以便与用户定义的 property 区分开来
vm.a="test111"和vm.$data.a="12323232323"一样都可以改变a属性的值
$watch()方法时当a值发生变化之后进行的回调回函,此方法在开发中也是非常实用的
实例生命周期钩子
生命周期:我们把一个对象从生成(new)到被销毁(destory)的过程,称为生命周期
生命周期钩子的 this 上下文指向调用它的 Vue 实例,箭头函数并没有 this
var vm = new Vue({
el: '#app',
data:{
a: "hello"
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
});
控制台打印的结果:a is:hello
生命周期图例(先记录再慢慢理解):
模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析
在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:
插值:
v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过
指令:
地址:https://cn.vuejs.org/v2/api/#v-text
v-text
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{ msg }}</span>
v-html
v-show
v-if(条件渲染)
v-else
v-else-if
v-if
v-for
v-on
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<div id="app" >
{{ a }}
<!-- <a v-bind:href="url">百度一下</a> -->
<input type="button" value="按钮" v-on:click="a+=1"/>
</div>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
v-bind
<a v-bind:href="url">...</a>
var vm = new Vue({
el: '#app',
data:{
// a: "hello",
url: "https://www.baidu.com/"
}
在这里 href 是参数,告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。
缩写示例:
<img :src="imageSrc">
- 箭头函数绑定了父级作用域的上下文
问题:
如果你已经有一个现成的服务端应用,你可以将vue作为该应用的一部分嵌入其中
评论区