href js改变link_Vue.js备忘记录(二)

电玩女神 2023-01-02 07:30 25阅读 0赞

## 一. 模板语法 ##

### 1. 文本 ###

<span>Message: {
         { msg }}</span>

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

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

<span v-once>这个将不会改变: {
         { msg }}</span>

### 2. HTML ###

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

例如：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            <p>Using mustaches: {
         { rawHtml }}</p>
            
            <p><span v-html='rawHtml'></span></p>
            
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            const app = new Vue({
         
                el: '#app',
                data: {
         
                    rawHtml:'<span style="color: red;">this should be red</span>'
                },
            })
        </script>
    </body>
    
    </html>

![29e1737c058cb4536906fa18f14963d1.png][]

### 3.绑定标签属性 ###

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

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

<button v-bind:disabled="isButtonDisabled">Button</button>

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

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

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

{
         { number + 1 }}
    
    {
         { ok ? 'YES' : 'NO' }}
    
    {
         { message.split('').reverse().join('') }}
    
    <div v-bind:id="'list-' + id"></div>
    
    -------------------------------------------------------------------------------------
    
    {
         { var a = 1 }}
    
    
    {
         { if (ok) { return message } }}

## 二. 指令 ##

![7070504cbb64bada8487d6b265816112.png][]

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

<p v-if="seen">现在你看到我了</p>

### 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的单向绑定)

<a v-bind:href="url">...</a>
    
    
    <a :href="url">...</a>

### **4. v-on** ###

<a v-on:click="doSomething">...</a>
    
    
    <a v-on:click="doSomething(arg)">...</a>  
    
    
    <a @click="doSomething">...</a>

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

事件参考developer.mozilla.org

![6a4da92542b6eee5a0378206c3de266d.png][]

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

<div class="app">
        <button v-on="{mouseenter:onenter,mouseleave:leave}">click me</button>
    </div>

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

<a v-on:click="doSomething">...</a>
          methods: {
            doSomething(e) {   
              console.log(e);
            }
          },

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

<button @click=doSomething(reslut,$event)>OK</button>
          methods: {
            doSomething(arg,e) {   
              console.log(arg);
              console.log(e);
            }
          },

## 5. v-text ##

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

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

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

## 6. v-cloak ##

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

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

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

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

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            [v-cloak] {
         
                display: none;
            }
        </style>
    </head>
    
    <body>
        <div id="app" v-cloak>
            <h1>{
         {msg}}</h1>
            <h1>{
         {msg}}</h1>
            <h1>{
         {msg}}</h1>
            <h1 v-text=msg></h1>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vm = new Vue({
         
                data: {
         
                    msg: 'hello'
                }
            }).$mount('#app')
    
        </script>
    </body>
    
    </html>

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

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

<div v-pre>{
         { this will not be compiled }}</div>

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

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

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

<p v-once>{
         {msg}}</p>   //即使是双向数据绑定,也只修改一次

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

<div v-html="url"></div>
    在data中:  url:'<a href="https://www.baidu.com">百度一下</a>'

## 三. v-bind绑定样式 ##

### 1. 绑定class ###

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

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

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

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

<span v-bind:class="{done:todo.done}">{
         {
         todo.title}}</span>

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

### 2. 数组语法 ###

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

<div v-bind:class="[activeClass, errorClass]"></div>
    data: {
      activeClass: 'active',
      errorClass: 'text-danger'
    }

渲染为：

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

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

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

### 3.绑定内联样式 ###

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

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
    
    data: {
      activeColor: 'red',
      fontSize: 30
    }

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

<div v-bind:style="styleObject"></div>
    data: {
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }
    }

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

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

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

<input class="new-todo" 
    placeholder="What needs to be done?" 
    autofocus v-on:keyup.enter="handleIn" 
    v-model="add">
    
    
    	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=''				
    			})

![1d5a3f0aa6267749d4e0f6e2688d52f0.png][]

第四条是我新增的数据

![f65d6c644ad7cbdd5e88fb93e2c90e55.png][]

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

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

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

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

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

handleIn(e){
    				console.log(e);			
    			},

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

![7474fe64b09039c40cb97d2175c4f4fb.png][]

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

![f44aa80db30f01972b0e23a7b6b35d9c.png][]

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

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

handleIn(e){
    				todos.push({
    					title:e.target.value,
    					done:false,
    					seen:true
    				})
                                    this.add=''		
    			},

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

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

<input class="new-todo" 
    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对象联系起来
 *  按条件渲染上面的页面

![f81f2a447500c5c428e6f70542632cdf.png][]

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

列表渲染 — Vue.jscn.vuejs.org

![6fbd65ef0c4dce97943bfc44fd033a2c.png][]

<div  v-for="(todo, index) in filterTodos" :key="index" v-show=todo.seen >
    
    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;
    			}
    		}
    	},

[29e1737c058cb4536906fa18f14963d1.png]: /images/20221120/edfb69c43ee5442889865149e07514ca.png
[7070504cbb64bada8487d6b265816112.png]: /images/20221120/18f1c5784ac14ff197078e0667ddafaf.png
[6a4da92542b6eee5a0378206c3de266d.png]: /images/20221120/636d3572ba8445d0bcca1f436184f86c.png
[1d5a3f0aa6267749d4e0f6e2688d52f0.png]: /images/20221120/4c6f9d8bf05a4d35a83bfba2480f4b88.png
[f65d6c644ad7cbdd5e88fb93e2c90e55.png]: /images/20221120/5d4e49ef9a8d475db31520982c1130ec.png
[7474fe64b09039c40cb97d2175c4f4fb.png]: /images/20221120/4cabe459e0f7445c9d7fa19f1e375bdb.png
[f44aa80db30f01972b0e23a7b6b35d9c.png]: /images/20221120/d019b7dfc0d847018075d5d7094e9bb5.png
[f81f2a447500c5c428e6f70542632cdf.png]: /images/20221120/5bb978f9ec0a416cad6851b80fbce358.png
[6fbd65ef0c4dce97943bfc44fd033a2c.png]: /images/20221120/d4f209a5d2e949a6b1f31b7eae85b7bb.png