一、Vue

1.下载Vue

下载地址:cn.vuejs.org

2.引入Vue

创建vue.js,内容复制官网

3.Vue的基础语法

3.1 Vue的特点

渐进式框架,采用自底向上的增量开发,Vue关注视图层

MVVM:

Model-View-ViewModel

采用双向数据绑定,改变数据影响元素,反之亦然

3.2如何使用Vue

引入Vue的核心JS文件

准备Dom结构

实例化组件

通过el属性,挂载元素,绑定id为App的html元素

el:"#app"

通过data属性,定义数据,可以在html代码啊段中显示的数据 

data:{

    msg:"Hello Vue!"

}

获取数据,通过Mustache语法(双大括号)的文本插值

{{msg}}

3.3 JavaScript表达式

在Vue模板中,提供了完全的JavaScript表达式支持,注意,只能在模板写入表达式,而不能使用js语句

3.3.1 支持得到表达式

字符串方法操作

<div>{{msg.split(" ").reverse().join(" ")}}</div>

数值运算

<div>{{num+1}}</div>

三目运算符

<div>{{flag?"喜欢":"不喜欢"}}</div>

3.3.2 不支持的表达式

创建对象

流程控制语句

4.指令

是带有v-前缀的特殊属性

指令的职责是,当表达式的值改变时,将七产生的连带影响,响应式作用域DOM

4.1 文本渲染

v-text

显示数据,响应式(默认) 简写:{{}}

v-once

只显示一次

v-html

v-bind

v-bind:属性绑定

简写方法:

:属性名

4.2Class和Style

Class绑定

class

classObj

classList

Style绑定

class一致

直接传入对象styleObject

直接使用数组对象styeList

5.事件

5.1监听事件

绑定事件语法:

    v-on:事件名

简写

    @事件名

5.2方法事件处理器

需要在methods属性中定义方法

    var app = new Vue({

    el:"#app",

    data:{

        count:0

    },

    methods:{

        addCount:function () {

            this.count++;

        }

        }

    });

5.3$event对象

通过这个方法可以得到点击的对象,及内部所有属性

5.4 事件修饰符

事件本身为冒泡触发,从小至大

stop阻止事件冒泡

prevent阻止事件默认行为

capture从大到小

self只有点击当前元素触发行为,而不触发子元素

once只触发一次

@事件.修饰符="方法名"

5.5 键值修饰符

enter

<input v-on:keyup.enter="submit"> 

6.条件渲染

6.1 v-if

当条件返回true时,执行

6.2 v-else

当不满足if条件时,要结合v-if一起使用

6.3 v-else-if

当不满足if时,结合v-if一起

6.4 v-show

v-if是真正的条件渲染

v-show是显示或隐藏,但是元素本身会创建

7. 列表渲染

7.1 v-for

v-for="item in items"

直接从列表中获取

v-for="(item,index) in items"

根据索引获取

<li v-for="(key,value,index) in person"

根据key索引

7.2key属性

    <li v-for="item in items" :key="item.id">

    {{item.name}}<li>

7.3取值范围

    <h3 v-for="index in 10">{{index}}</h3>

8. 表单输入绑定

利用v-model,来实现输入输出的双向绑定

8.1 文本框Text

<input type="text" v-model="data中的值">

8.2 复选框

<input type="radio" v-model="data中的值">

8.3 单选框

<input type="checkbox" v-model="data中的值">

8.4 选择列表|表单

8.5 修饰符

.lazy

绑定数据默认实时更新,lazy在onChange触发,鼠标失焦后就会触发

.number

将数据转为数字类型

.trim

去除前后空格

二、组件

1.定义组件

1.1全局注册

定义全局组件,只要使用该标签即可触发

Vue.component("my-hello",{

    template:"<h3>Hello Vue</h3>"

});

1.2局部注册

在vue表达式内注册组件

new Vue({

      el:"#root",

        //定义局部组件

        components:{

          "inner-hello":{

              template:"<h4>我是局部组件</h4>"

          }

        }

    });

1.3使用组件

用双标签进行使用

1.4 is属性

当一些组件内无法识别该组件名的表情时需要使用is

<table id="app">

  <!--无法使用-->

  <tr is="my-hello"></tr>

</table>

table > tr > [th,td]

ol/ul > li

select > option