Vue

v-once


    {
    {message}}

    

将v-once去掉,

 

原生HTML渲染


    {
    {rawHtml}}

    


    

    

Vue_第1张图片

readonly属性


    

    
不能输入任何东西

Vue_第2张图片

将data中的readonly改为false

Vue_第3张图片

Mustache 语法(双括号内)使用JavaScript表达式


    

{ {number + 1}}

{ {ok? 'yes': 'no'}}

{ {message.split('').reverse().join('') }}

Vue_第4张图片

有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效:


{
    { var a = 1 }}


{
    { if (ok) { return message } }}

指令、参数

指令 (Directives) 是带有 v- 前缀的特殊 attribute。

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML attribute:

百度

在这里 href 是参数,告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

另一个例子是 v-on 指令,它用于监听 DOM 事件, 在这里参数是监听的事件名:


    
你看到我了
百度

Vue_第5张图片

动态参数

这里的 [attrname]或者[eventname] 会被作为一个动态参数,其值在data中声明


    
百度

值得注意的是:在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板),还需要避免使用大写字符来命名键名,因为浏览器会把 attribute 名全部强制转为小写,同时一定要避免空格和引号

百度

 

Vue_第7张图片

同样我们也可用方法属性:


    

{ {message}}

{ {reverseMessage()}}

注意p标签内的reverseMessage带括号

计算属性VS方法

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。

我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

 

事件处理

表达式处理

使用js表达式来响应事件。


    

{ {count}}

 

Vue_第8张图片

由上可以看到,我们是在clik事件内写的表达式,每点击button按钮一次数字+1

指定函数

指定处理函数名称相应事件。


    

{ {count}}

Vue_第9张图片

调用函数

通过调用具体函数,并传递所需参数响应事件。
 


    

{ {count}}

Vue_第10张图片

事件修饰符

修饰符是控制事件对象的接下来的行为,比如是否继续传播或者只响应-次。

stop和once


    

{ {count}}

 once只执行一次,不会阻止事件的传播,因此点击只加载一次按钮1会加到2,再点击2不会继续往上加了,once不阻止事件传播,因此会触发div的点击事件,控制台打出了信息

Vue_第11张图片

而点击阻止按钮,数字能继续往上加,但他会阻止的事件的向下传播,因此不会触发div的点击事件,控制台没有打印触发的信息 

Vue_第12张图片

表单输入绑定

你可以用 v-model 指令在表单 

Vue_第13张图片

 

单选框和复选框


    

篮球 足球 羽毛球 兵乓球

Vue_第14张图片

单选按钮



    
支付宝
微信
网银
云闪付

Vue_第15张图片

选择下拉框

 

Vue_第16张图片



    

但为了设置下拉框的默认选项,比如默认选中上海,这时需要在div中加上v-model,js中添加对应属性

data: {
    selected: 3,
    cities:[
        {name:"北京",id:1},
        {name:"上海",id:2},
        {name:"广州",id:3},
        {name:"深圳",id:4}
    ]
}

Vue_第17张图片

如果要多选的在v-model前加上 multiple,对应的data内的属性改为数组

selected: [2,4],

Vue_第18张图片

修饰符



    

{ {myCompare}}


{ {myLazy}}


{ {myNum}}


{ {myTrim}}

lazy

Vue_第19张图片

看已看到没有lazy时文件显示与input内的文字同步,而有了lazy过后,只有input文本框内按下回车让光标消失触发change事件时显示的文本才同步。

number和trim

对于number我们可以看到初试渲染监视到的是字符串类型,对于trim可以看到字符串是有空格的,我们在number的input框输入124aaa,在tirm的输入框输末尾和中间也添加空格,可以看到:

number将输入的字符串变为只含数字的数字类型的值,trim将输入的首尾含空格的字符串去掉收尾空格

自定义组件

通过属性传递参数



    

Vue_第20张图片

我们自定义组件mylink,同时用props添加一个href的属性,p标签的内容显示href,在mylinks标签内,用v-for获取每一个anchors数组对象的每一项内容,每一项的内容存在e中,这是我们将e绑定至自定义的属性href

使用component-使用对象传递多参数


    

Vue_第21张图片

值得注意的是自定义的属性是一个对象

使用component-子组件事件向父组件传递


    

Vue_第22张图片 Vue_第23张图片

 

使用component-子组件事件并附带一个参数向父组件传递


    

Vue_第24张图片Vue_第25张图片

图二为点击一次的效果,每点击一次字体放大30px

路由


    
Go to Foo
Go to Bar


Vue_第26张图片

 

 

 

 

 

 

你可能感兴趣的:(Vue)