v html 绑定事件参数,Vue.js备忘记录(二) {{}}, 指令 ,v-bind, watch监听浏览器本地存储, 路由状态切换...

一. 模板语法

1. 文本

Message: {{ msg }}

msg属性发生了改变，插值处的内容都会更新。

如果只想更新一次: v-once

这个将不会改变: {{ msg }}

2. HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用f="https://cn.vuejs.org/v2/api/#v-html">v-html指令

例如：

Document

Using mustaches: {{ rawHtml }}

const app = new Vue({

el: '#app',

data: {

rawHtml:'this should be red'

},

})

3.绑定标签属性

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用f="https://cn.vuejs.org/v2/api/#v-bind">v-bind指令

对于布尔 attribute (它们只要存在就意味着值为true)，v-bind工作起来略有不同，在这个例子中：

Button

如果isButtonDisabled的值是null、undefined或false，则disabledattribute 甚至不会被包含在渲染出来的元素中。

4. {{}} 和v-bind其实都可以用JavaScript表达式

有个限制就是，每个绑定都只能包含单个表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

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

-------------------------------------------------------------------------------------

{{ var a = 1 }}

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

二. 指令

指令 (Directives) 是带有v-前缀的特殊 attribute。比如: v-on v-if v-bind 等等

现在你看到我了

1. 参数

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

...

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

另一个例子是 v-on 指令，它用于监听 DOM 事件：

...

2.修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

...

3.v-bind

v-bind是Vue中绑定属性的指令 (M到V的单向绑定)

...

...

4. v-on

...

...

...

v-on这种写法只是提供了便捷的绑定事件方式，并没有改变原生的JS事件，所以所有的原生JS事件都是支持的

事件参考​developer.mozilla.org

图标

v-on可以绑定多个事件,当绑定多个事件时，需要传入一个对象，对象的键名就是事件名，对象的键值就是对应事件要执行的方法。

click me

如果调用的函数需要触发事件对象,可以直接形参接收,默认就传

... methods: {

doSomething(e) {

console.log(e);

}

},

如果调用的函数有参数,同时需要触发事件对象,如何接收? 此时触发事件必须用$event传入

OK methods: {

doSomething(arg,e) {

console.log(arg);

console.log(e);

}

},

5. v-text

v-text是绑定文本数据的另一种形式,

但在浏览器渲染方面略有不同,因为通常都是window onload之后vue才会接管

v-text 确保 vue出问题时也不会把{{xxx}}显示出来,快速刷新也不会闪屏

{{msg}}

6. v-cloak

v-text比较麻烦,{{}}又怕出丑,有没有一举两得的方法呢??? 有啊 v-cloak

v-cloak写在vue入口组件上,它会伪装一个样式,让浏览器将错误隐藏掉

在下面的例子中,#app组件上 加载了v-cloak 它可以被浏览器视为一个带有v-cloak属性的标签, 那么我们为带有v-cloak属性的标签设计一个样式,使其隐藏起来

当vue接管页面后,它会识别v-cloak 组件,并重新渲染出来

Document

[v-cloak] {

display: none;

}

{{msg}}

{{msg}}

{{msg}}

var vm = new Vue({

data: {

msg: 'hello'

}

}).$mount('#app')

7.v-pre //跳过该组件的编译

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

{{ this will not be compiled }}

咋一看仿佛没有什么意义,其实它是为了加快Vue对网页解析渲染速度.

上例中如果div里面是无数的图片和文字的一篇新闻稿,那Vue完全应该跳过对他们的渲染,因为他们都是原生html而已,,有了v-pre,Vue会跳过他们,都不看任何一眼.

8.v-once //只绑定一次

{{msg}}

//即使是双向数据绑定,也只修改一次

9.v-html //将内容按照html解析

在data中: url:'百度一下'

三. v-bind绑定样式

1. 绑定class

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用v-bind处理它们

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

比如:我们设计一个样式,当todo.done为true时触发这个样式,

.done{

text-decoration: line-through;

color: #aaa;

}

当todo.done为true时触发这个样式,则

{{todo.title}}

class里传入一个对象,其实是个键值对,对象的键名就是class类名,键值是一个布尔值,布尔值为真时,执行这个样式,布尔值为假,不执行这个样式.

2. 数组语法

我们可以把一个数组传给v-bind:class，以应用一个 class 列表：

activeClass: 'active',

errorClass: 'text-danger'

}

渲染为：

如果你也想根据条件切换列表中的 class，可以用三元表达式：

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

我们可以即为class传入普通类名,同时传入数据绑定对象

3.绑定内联样式

v-bind:style的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

activeColor: 'red',

fontSize: 30

}

鉴于它其实是对象,干脆写成对象: 这会让模板更清晰

styleObject: {

color: 'red',

fontSize: '13px'

}

}

v-bind:style的数组语法可以将多个样式对象应用到同一个元素上

四. 不用双向数据绑定来获取input标签的内容

我们知道,如果我们用双向数据绑定获得input的内容时,还需要一个中间变量

var app = new Vue({

el: ".todoapp",

data: {

add:'',

},

methods: {

handleIn(){

const addTodo={

done:false,

seen:true

}

addTodo.title=this.add

//需要中间变量过度以下以防一个数据源绑定多条数据,如下图

todos.push(addTodo)

this.add=''

})

第四条是我新增的数据

增加第五条时,第四条也变了,因为双向绑定

上面的情况,可以通过局部中间变量的过渡解决,那么双向数据绑定还有什么意义?

所以,建议通过获取调用方法的元素的方式解决

调用方法时,方法会默认传入一个参数,event

我们用编写方法时接收这个event

handleIn(e){

console.log(e);

},

此时,我们得到一个event对象

查看对象属性,我们发现有一个target属性,其实就是调用这个方法的input

查看target的属性,我们发现有个value格外显眼,这就是我们想要的内容~所以

上面的程序可以弃用双向数据绑定,改用查询DOM属性的方式

handleIn(e){

todos.push({

title:e.target.value,

done:false,

seen:true

})

this.add=''

},

以此类推,如果input是checkbox, 我们可以去target中找checked

注意:上面的方法我们都用了一个参数叫event,但如果调用函数里面有形参,这个参数是无法获取的,如果想既传参又传event 则需要在调用时强烈的声明!!!!并在写函数时做好形参接收工作!

placeholder="What needs to be done?"

autofocus v-on:keyup.enter="handleIn(index,$event)"

v-model="add">

handleIn(index,e){

}

五. watch监听浏览器本地存储

1.浏览器本地存储

window.localStorage.setItem(键,值)

浏览器本地存储必须是键值对,且值为字符串,如果我们存储对象,则:

window.localStorage.setItem("a",JSON.stringify(obj))

2.浏览器取值

window.localStorage.setItem(键,值)

如果取得是对象,需要转换一下

JSON.parse(window.localStorage.getItem(键))

3.应用在vue里,我们本地存储一个对象叫todos,每次vue接管时取出

data: {

todos: JSON.parse(window.localStorage.getItem('todos')||'[]'),

},

4.如何存储???

我们对数据操作这个频繁,难道要每个位置添加存储语句吗?

更理想的方法是监听内存中的Vue对象的todos属性的变化

因为todos是一个对象, 所以我们需要深度监听

watch: {

todos:{

handler(){

console.log('jilule')

window.localStorage.setItem('todos',JSON.stringify(this.todos))

}

},

deep:true,

}

六. 路由状态切换

举例:我们想点击底下的3个按钮切换上面的显示内容 我们需要做那些工作?

获取路由状态

将状态与Vue对象联系起来

按条件渲染上面的页面

获取路由状态

我们知道浏览器有一个onhashchange方法可以判断url的哈希值

window.οnhashchange=function (){

console.log(window.location.hash);

}

2. 将状态与Vue对象联系起来

window.onhashchange = function () {

var hashv = window.location.hash

switch (hashv) {

case '#/':

this.app.filterText = 'all'

break;

case '#/active':

this.app.filterText = 'undone'

break;

case '#/completed':

this.app.filterText = 'done'

break;

default:

break;

}

}

window.onhashchange()

注意一个问题:

此方法只有在页面哈希值变化时才变化,如果我们第一次打开页面,将app的filterText 改为undone,关闭页面在打开时,不会触发window.onhashchange,所以会显示 #/页面,但此时app的filterText其实是undone. 所以我们需要在加载页面时执行一次window.onhashchange()

3. 使用计算属性 将要显示的列表显示出来

computed: {

filterTodos() {

switch (this.filterText) {

case 'done':

return this.todos.filter(todo => todo.done)

break;

case 'undone':

return this.todos.filter(todo => !todo.done)

break;

default:

return this.todos

break;

}

}

},