Vue 基础

vue-learn

学习vue, 记录笔记

代码放在：vue-learn

Hello World

1. 创建vue 实例
2. el 表示 vue 管理的区域
3. data 表示管理区域内的数据
4. {{内容}} 进行绑定

TODOList

v-for

循环遍历 data中 list 的数据

v-on

绑定事件, 放在methods 内

todoList 中在按钮中绑定提交事件

简写: v-on:click => @click

v-model

数据的双向绑定

输入框数据发生变化, 则data中数据也发送变化. data 中定义变量发送变化则页面数据也跟着变

v-model.lazy : 懒惰加载，当鼠标移出输入框后才加载
v-model.number : 数字加载，只有输入的是数字才加载，字符串不加载
v-model.trim : 去除空格

v-bind

向组件传入绑定值，

props 组件接受那些值

简写: v-bind:index => :index

v-if

条件判断语句

v-else

判断语句, 必须紧跟 v-if, 中间不能插入其他元素

v-else-if

判断语句, 必须紧跟 v-if, 中间不能插入其他元素

v-text

将值输出成文本

v-html

将值输出成html

v-show

输出元素，不会移除dom， 经常控制界面元素显示和影藏

v-show 会渲染到页面，只是display: none;

不支持<template></template>属性

v-once

将组件放到内存中，不会每次去销毁，提高性能

MVVM 模式

传统MVP 设计模式

主要面向DOM进行操作

View <=> Presenter <=> Model

View : 视图 Presenter : 控制器, 大量的DOM操作

MVVM

View <=> ViewModel <=> Model

ViewModel : DOM Listeners , Data Bindings. Vue 内置的, 我们并不需要关注

主要面向数据进行操作

前端组件化

可以将页面进行切分, 组件就是界面中的一小块。

父组件使用v-bind 向子组件传值，子组件使用 this.$emit 向父组件触发事件，父组件监听这个时间, 并接受事件的参数

Vue 实例

全局变量： app.$data.xx

以$开头的都是这个实例的实例属性和实例方法

app.$destroy() //将这个实例销毁，销毁后再修改值,页面不会发送变化

生命周期钩子

生命周期函数就是vue实例在某个时间点自动执行的函数

1. init : 初始化事件和生命周期相关部分
2. beforeCreate()
3. init : 处理外部注入和 双向绑定等
4. created() //初始化完成
5. has el : 是否有元素绑定，没有执行 vm.$mount(el)
6. has template : 是否有模版, 有模版就执行模版，没有就把el的内容当成模版
7. beforeMount() //模版和数据即将挂载的一瞬间, 未渲染页面
8. vm.$el replace el 模版和数据进行挂载
9. mounted() //已渲染页面
10. mount 挂载
11. 当 data 中数据有变化 (app.$data.seen = false)
12. beforeUpdate() //渲染之前
13. DOM 重新开始渲染
14. updated() //渲染之后
15. 当 vm.$destroy() 被调用,下面开始执行 (app.$destroy())
16. beforeDestroy() //销毁之前
17. 销毁
18. destroyed() //销毁之后

模版语法

这3个内容之中都可以写js 表达式

1. 插值表达式 : {{data}},
2. v-text
3. v-html
4. 单次插入值：当 {{* data}} 使用 v-model 绑定的时候，只会初始化一次，就不会双向绑定了。多了一个* 。
5. 等同于v-html : 当使用 {{{raw_html}}} 时，解析为html. 这时数据绑定会忽略，如果需要复用模块片段，使用partials.
6. 表达式可以添加过滤器 filter: {{message | capitalize}}, 管道预约不是js语法，不能在表达式中使用，只能添加在表达式之后。Vue内置了一些过滤器，过滤器可以串联，可以接受参数 {{message | filterA 'arg1' arg2}}.

计算属性， 方法， 侦听器

• computed
• methods
• watch

样式绑定

class

1. 绑定obj: v-bind:class
2. 绑定数组: v-bind:[classA, classB]

<div class="static" v-bind:class="{class-a:isA, class-b:isB}"></div>
data : {
	isA: true,
	isB: false,
}

=> 结果
<div class="static class-a" ></div>

<div v-bind:class="classObject" ></div>
data : {
	calssObject :{
		'class-a': true,
		'class-b': false,
	}
}

style

1. 绑定obj : v-bind:style="xx"
2. 绑定数组 : v-bind:[styleObjectA, styleObjectB]

条件渲染

给元素加 key="xx" vue就会认为是页面中唯一的元素，如果key不同就不会复用

    <div v-if="show">
        用户名： <input>
    </div>
    <div v-else>
        邮箱名： <input>
    </div>

加key 不会复用

    <div v-if="show">
        用户名： <input key="username" />
    </div>
    <div v-else>
        邮箱名： <input key="mail" />
    </div>

列表渲染

    <div v-for="(item, index) of list"
         :key="item.id">
    {{item}} -- {{index}}
    </div>

性能高： key值唯一，不是用index

我们操作数组的时候，不能使用下标的方式，

1. 使用vue提供的方法。

• push 增加
• pop 删除最后一条
• shift 删除第一项
• unshift 第一项加内容
• splice 切割
• sort 排序
• reverse 取反

1. 改变数组引用，

app.list = [{新数据}]

1. set 方法

Vue.set(app.list, 1, 5)

app.$set(app.list, 1, 5)

template

模版占位符, 包裹一些元素，并不会被渲染

    <template v-for="(item, index) of list"
         :key="item.id">
        <div>{{item}} -- {{index}}</div>
        <span>xxx</span>
    </template>

对象循环

    <div  v-for="(item, key, index) of userInfo">
        <div>{{item}} -- {{key}} -- {{index}} </div>
    </div>

1. 改变引用来进行渲染的改变
2. set 方法进行改变

//全局方法
Vue.set(app.userInfo, "address", "beijin")

//实例方法
app.$set(app.userInfo, "address", "beijin")

vue 组件间的关系

is

使用is 解决h5中 标签规范 的bug, 包含后页面展现错误

<select>
    <option is="row"></option>
</select>


Vue.component("row", {
    template : "<tr><td>this is a row</td></tr>",
})

子组件定义data, 必须是一个函数，而不能是一个对象,

Vue.component("row", {
    data : function () {
      return {
          content : "this is a row"
      }
    },
    template : "<tr><td>{{content}}</td></tr>",
})

操作DOM

使用 ref 定义引用名称

<div ref="hello" @click="handleClick"> hello world</div>


var app = new Vue({
    el: "#app",
    methods : {
        handleClick : function () {
           console.log( this.$refs.hello.innerHTML  )
        }
    },
})

父组件通过属性的方式向子组件传值

父组件

    <counter :count="0"></counter>

子组件 使用props 接受父组件传递的参数

var counter = {
        template: '<div>{{count}}</div>',
        props : ["count"],
    }

单项数据流：子组件不能反过来修改父组件的值, 只能拷贝后修改自己的值

父子组件传值

1. 父组件通过属性的方式，子组件props 接收
2. 子组件使用事件触发向上传值，父组件监听事件，获得传递的参数

非父子组件传值

1. Vuex
2. 总线机制 ： Bus/总线/发布订阅模式/观察者模式

Vue中的插槽(slot)

当子组件显示依赖父组件传递dom 进行展现的时候，使用插槽

CSS 动画效果

transition

使用该标签实现动画效果, 过渡动画效果。

原理：在一定时间在组件上加css