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

{{item.变量}}

访问指定的列表属性

列表数据的同步更新

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属性将组件绑定到某个标签上,如

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

props

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

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

directives语句

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

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

你可能感兴趣的:(vue入门)