vue入门

vue特点

   1. 响应式-双向绑定

    使得用几句命令实现HTML与js的互相响应

2、组件化-模块化

    将各个网页需要的共同部分组成一部分，需要时调用组件从而实现组件化模块化

3、单文件组件

    js-css-HTML在一个文件中，能够限定css语句的作用于，并能在一个文件中同时编辑他们。

vue实例对象

构造函数，构造参数，参数选项构成

构造参数

el：规定vue对象装载在HTML页面的位置

template：在HTML中使用的模板

data：数据带入到实例中。

components：加载子实例到本组件

文本渲染

v-text,v-html,{{ }}

{{}}将括号内指定的文本渲染到页面中

v-text操作的是纯文本作用等同于{{ }}不会解析HTML标签。 

v-html操作是先解析HTML标签再将文本渲染到页面里。

列表渲染

v-for

<P v-for="item in list">{{item.变量}} </p>

访问指定的列表属性

列表数据的同步更新

methods：添加一个方法

this.变量；访问指定变量 

v-bind方法

v-bind方法能够动态的绑定一个标签的属性，例如,v-bind:class="name"那么class的名就是name这个变量的值。

可简写为:class="name"

v-if语句

v-if语句能够进行条件判断，从而选择是否执行语句。例如v-if="part",part是一个布尔型数据。

v-show语句

v-show语句同v-if 语句显示效果，但v-show是通过display:none来改变，而v-if是通过添加删除语句改变的。

v-else语句（无参数）

与v-if语句对应如果v-if为true时执行true下的语句，否则执行v-else下的语句

v-on 语句

执行一个事件，可用@符号代替,如v-on:click="event"或@click="event"

计算属性computed

可以对数据进行动态的计算，如

computed:{

return this.data.replace("/\d/g","")

}

可将数据只输出非数字字符

watch数据监听

当数据进行改变的时候，执行某个操作。

数据监听

function函数中有两个参数，val（新值），olval（旧值）

is属性

我们可以使用is属性将组件绑定到某个标签上，如<p is="com-a"></p>

同时我们可以使用，v-bind进行动态的引入组件。

props

接受来自父组件的数据，对大小写不敏感。声明成数组能接受多个变量。

声明成对象时，需要设置属性的类型，类型是一个数组。可以设置多个类型。

directives语句

在组件中使用语句，是在本组件中自定义指令。

当使用vue.dirctives方法是，为全局的自定义指令。