vue复习

生活就是一天一天的循环，要保持好的习惯比较艰难因为你会碰到外在的阻力，天不时地不利人不和，好习惯的循环一天天变得衰落最终堕落消失。为了抵抗外在的阻力，我们的内在意志力更加不应该落井下石，而是需要保持警惕，在发现情况不对的时候多耗费一些意志力将好习惯拉上正常轨道甚至提升一个档次，这样才有更大的下落空间。所以这世上没有一蹴而就的事情就是这个原因，你需要时不时重新耗费意志力去维持一件事物，如果不去维持就会因日积月累的阻力而不断衰落直至消亡。守业更比创业难。越是顺利的时候越要提高警惕，绝不能放纵自己！！！

vue安装

在官网上直接下载vue.min.js，或者在项目中npm i vue

1.引包

<script type="text/javascript" src="./code/lib/vue-2.4.0.js"></script>

2.创建一个vue实例

var vm = new Vue({
	// el指向DOM元素中引用的范围
	el:'#app',
	data:{
		msg: 'hello vue'
	},
	methods:{
		showMe:function(){
			return this.msg + 'I\'m xiaobai'
		}
	}
})

3. 创建一个div元素输出vue对象属性和函数的返回值

<div id = "app">
	<p>{{ msg }}</p>
	<p>{{ showMe() }}</p>
</div>

vue模板语法

• 插值

  • 文本 {{ }}
  • html

  <!-- message是html格式的字符串 -->
  <p v-html = "message"></p>
  

  • 属性

  <!--v-bind绑定属性后，值应该是变量或者是字面量 -->
  <p v-bind:class = "'class1'"></p>
  

  • JS表达式 {{ ok? ‘yes’ : ‘no’ }}

• 指令 （在表达式的值改变时，将某些行为运用到DOM上）

  • v-if （根据表达式的值决定是否插入这个元素，如果为false，这个元素不存在，而不是值为空），结合v-else，v-else-if使用，比较v-show
  • v-for （如果是遍历对象，键可以有3个，第一个是值，第二个是属性，第三个是索引）

  <!--v-bind绑定属性后，值应该是变量或者是字面量 -->
  <p v-for = " (value,key,index} in obj">{{ index }}.{{ key }}: {{ value }}</p>
  

  • v-bind
  • v-on
  • v-model

• 过滤器 {{ message | filter }}

• 计算属性computed

  • computed与methods的区别，计算属性是基于它的缓存，加载速度更快，methods每次执行都需要调用方法。computed性能更好，但是会有缓存。依赖缓存，当数据发生变化的时候无法及时响应

• 数据监听watch

  • 语法watch:{监听对象:监听方法}

• 样式绑定

  • 属性绑定

• 事件监听v-on

  • 事件修饰符

  <!-- .prevent阻止自身点击事件，.-->
  <a @click.prevent = "showMe">点我</a>
  <!-- .stop阻止冒泡.-->
  <a @click.stop = "showMe">点我</a>
  

  • 按键修饰符

   <!-- 按下enter键，alt,ctrl,delete,tab,up,down,left,right,shift等.-->
  <a @keyup.enter = "showMe">点我</a>
  

• 表单：通过v-mode在表单控件上实现双向数据绑定

  • input
  • 单选框是一个值，复选框可以绑定到一个数组