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指令

例如：

    
    
    



    

        
Using mustaches: {{ rawHtml }}
        
        

        
    
    
    

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 组件,并重新渲染出来

    
    
    
    



    

        
{{msg}}
        
{{msg}}
        
{{msg}}
        

    
    
    


 

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时触发这个样式,

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

{{todo.title}}

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

2. 数组语法

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

 data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：

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

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

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

3.绑定内联样式

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

 data: {
  activeColor: 'red',
  fontSize: 30
}

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

 data: {
  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 则需要在调用时强烈的声明!!!!并在写函数时做好形参接收工作!

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对象联系起来

• 按条件渲染上面的页面

1. 获取路由状态

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

window.onhashchange=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. 使用计算属性 将要显示的列表显示出来

列表渲染 —https://cn.vuejs.org/v2/guide/list.html#%E6%98%BE%E7%A4%BA%E8%BF%87%E6%BB%A4-%E6%8E%92%E5%BA%8F%E5%90%8E%E7%9A%84%E7%BB%93%E6%9E%9C

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;
            }
        }
    },