VUE

P3 模板语法

MVVM
model 模型，数据对象（data）
view 视图，模板页面
viewModel 视图模型（VUE实例）

双大括号表达式

<p>Hello {{name.toUpperCase() }}</p>

指令一：强制数据绑定

<img v-bind:src="imgUrl" ><!-- 强制绑定数据 -->
<img :src="imgUrl" >

指令二：绑定监听事件

<button v-on:click="test" type="button"></button>
<button @click="test" type="button"></button>

	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					name:'abcde',
					imgUrl:' '
				},
				methods:{
					test(){
						alert('HEHE');
					}
				}
			})
		</script>

P456 计算属性

1. 计算属性
   在computed属性对象中定义计算属性的方法
   在页面中使用{{方法名}}来显示计算的结果

computed: {
      fullName1 () { // 属性的get()
        console.log('fullName1()', this)
        return this.firstName + '-' + this.lastName
      }

2. 监视属性:
   通过通过vm对象的$watch()或watch配置来监视指定的属性
   当属性变化时, 回调函数自动调用, 在函数内部进行计算

watch: {
      // 配置监视firstName
      firstName: function (value) { // 相当于属性的set
        console.log('watch firstName', value)
        // 更新fullName2
        this.fullName2 = value + '-' + this.lastName
      }
    }

或者在外部

 vm.$watch('lastName', function (value) {
   console.log('$watch lastName', value)
   // 更新fullName2
   this.fullName2 = this.firstName + '-' + value
 })

3. 计算属性高级:
   通过getter/setter实现对属性数据的显示和监视
   计算属性存在缓存, 多次读取只执行一次getter计算

computed: {
      fullName3: {
        // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
        get () {
          console.log('fullName3 get()')
          return this.firstName + '-' + this.lastName
        },  //一定要加逗号！！！！！！！不然会报错set！！！！！！
        // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
        set (value) {// fullName3的最新value值  A-B23
          console.log('fullName3 set()', value)
          // 更新firstName和lastName
          const names = value.split('-')
          this.firstName = names[0]
          this.lastName = names[1]
        }
      }
    }

P7 强制绑定class和style

class绑定

<p :class="myClass">xxx是字符串</p>
<p :class="{classA: hasClassA, classB: hasClassB}">xxx是对象</p> //hasClassA:true/false!!
<p :class="['classA', 'classB']">xxx是数组</p>

style绑定

<p :style="{color:activeColor, fontSize}">嘻嘻</p>

P8 条件渲染

1. 条件渲染指令
   v-if
   v-else
   v-show
2. 比较v-if与v-show
   如果需要频繁切换 v-show 较好

<div id="demo">
  <p v-if="ok">表白成功</p>
  <p v-else>表白失败</p>

  <hr>
  <p v-show="ok">求婚成功</p>
  <p v-show="!ok">求婚失败</p>

  <button @click="ok=!ok">切换</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      ok: true,
    }
  })

P9 列表渲染

1. 列表显示
   数组: v-for / index
   对象: v-for / key
2. 列表的更新显示
   删除item
   替换item

<ul>
    <li v-for="(p, index) in persons" :key="index">
      {{index}}--{{p.name}}--{{p.age}}
    </li>
  </ul>

P11 事件处理

1.绑定监听

<button type="button" @click="test1">test1</button> //每个函数都有默认的 $event
<button type="button" @click="test2(123,$event)">test1</button>

data:{
					test1(event){
						alert(event.target.innerHTML);
					},
					test2(num,event){
						alert(num+" "+event.target.innerHTML);
					}
				},

2.事件修饰符

停止事件冒泡 @click.stop=…
阻止事件默认行为 @click.prevent

3.按键修饰符
@keyup.13 //13是keyCode
@keyup.enter //按起enter键时启动函数

P12 表单数据的自动收集

通过V-model（双向数据绑定）自动收集数据

举个栗子

<span>城市: </span>
		    <select v-model="cityId">
		      <option value="">未选择</option>
		      <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option>
		    </select><br>



data:{
		allCitys:[{id:1,name:'BJ'},{id:2,name:'SH'},{id:3,name:'CZ'}],
		cityId:''
		},

P13 生命周期

1、初始化
beforeCreate()
created()
beforeMount()
mounted()
2、更新
beforeUpdate()
updated()
3、死亡 vm.$destory
beforeDestory()
destoryed()

常用
mounted():发送ajax请求，启动定时器等异步任务
beforeDestory():做收尾工作，清除定时器等

P14 动画

给目标元素添加css的transition和animation

P15 过滤器

1. 理解过滤器
   功能: 对要显示的数据进行特定格式化后再显示
   注意: 并没有改变原本的数据, 可是产生新的对应的数据
2. 编码
   1). 定义过滤器
   Vue.filter(filterName, function(value[,arg1,arg2,…]){
   // 进行一定的数据处理
   return newValue
   })
   2). 使用过滤器
   {{myData | filterName}}
   {{myData | filterName(arg)}}

–>
需求: 对当前时间进行指定格式显示

P16 指令

常用内置指令
v:text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为true, 当前标签才会输出到页面
v-else: 如果为false, 当前标签才会输出到页面
v-show : 通过控制display样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略v-bind
v-model : 双向数据绑定
ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }

自定义指令

1. 注册全局指令
   Vue.directive(‘my-directive’, function(el, binding){
   el.innerHTML = binding.value.toupperCase()
   })
2. 注册局部指令
   directives : {
   ‘my-directive’ : {
   bind (el, binding) {
   el.innerHTML = binding.value.toupperCase()
   }
   }
   }
3. 使用指令
   v-my-directive=‘xxx’

P17 插件

 // 声明使用插件
  Vue.use(MyPlugin) // 内部会调用插件对象的install()

定义新插件（了解即可）

(function (window) {
  const MyPlugin = {}
  MyPlugin.install = function (Vue, options) {
    // 1. 添加全局方法或属性
    Vue.myGlobalMethod = function () {
      console.log('Vue函数对象的myGlobalMethod()')
    }

    // 2. 添加全局资源
    Vue.directive('my-directive',function (el, binding) {
      el.textContent = 'my-directive----'+binding.value
    })

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {
      console.log('vm $myMethod()')
    }
  }
  window.MyPlugin = MyPlugin
})(window)