vue学习笔记(一)

概念

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作为该应用的一部分嵌入其中

目录CONTENT