vue

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

由尤雨溪开发

jQuery

angular

React

Vue

axio

创建vue项目

1

npm create vue@latest

按提示进行install和编译

模板语法

文本插值

1
2
3
4
5
6
7
8
9
10
11
12
13

<template>
<h3><p>{{msg}}</p></h3>
</template>

<script>
export default{
  data(){
    return{
      msg:"hello vue"
    }
  }
}
</script>

• 使用JavaScript表达式时每个绑定仅支持单一表达式，即一段能够被求值的代码，即该代码能够在方法中被return出去
• 定义一个var，类似这种语句是不能够有效输出的

输出html标签

html标签在vue插值输出时不能够直接输出的，绑定输出标签时应该绑定v-html

假设有一个参数

1

myhtml:"<a herf="https:www.loh.com">我的网站</a>"

不能直接通过输出该标签

我们通过<标签 v-html=”myhtml”></标签>这种形式输出

属性绑定

v-bind

假如我们的html标签属性要从js中取值出来作为属性值，我们需要使用v-bind:标签属性:"js属性"进行取值

例如

1
2
3
4
5
6
7
8
9
10
11
12
13

<script>
export default{
    data(){
      return{
        msg:"active"
      }
    }
  }
</script>

<template>
  <div v-bind:class="msg">这是一个div</div>
</template>

• 如果v-bind的值为null或者undefined，那么会在渲染时被移除

简写

直接加：就行，不要加v-bind

条件渲染

v-if作为标签属性名，为真时启用内容，

v-else

v-else-if

v-show

• v-show基于css切换，无论显示与否都会渲染，根据display进行切换，开销较大

列表渲染

v-for

数组

1

names:["1","2","3"]

v-for=item in names遍历names中每一项

通过输出每一项

还可以遍历其他参数

v-for=”(value,item,index)” in names

分别取值，对象参数名，下标

通过key管理状态

vue按就地更新的策略更新v-for渲染的元素列表

为了防止重新渲染带来的性能开销，给标签加上唯一的key就可以在需要渲染时进行重新排序而不是重新渲染

事件处理

v-on

用于监听dom事件

内联事件

v-on绑定一个动作，如click

方法事件

函数方法定义在method里面

v-on绑定一个方法，

事件传参

有时我们需要在内联事件处理器中访问原生 DOM 事件。你可以向该处理器方法传入一个特殊的 $event 变量，或者使用内联箭头函数：

1
2
3
4
5
6
7
8
9

<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

1
2
3
4
5
6
7
8
9

methods: {
  warn(message, event) {
    // 这里可以访问 DOM 原生事件
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

计算属性

1
2
3
4
5
6
7

computed: {
    // 一个计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向当前组件实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }

你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果：

不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 author.books 不改变，无论多少次访问publishedBooksMessage 都会立即返回先前的计算结果，而不用重复执行 getter 函数。

表单输入绑定

侦听器

类与样式绑定

组件基础

AXIOS网络通信

mounted钩子函数

绑定

插槽

开发使用vue-cli（2.0版本）

vue-router

安装vue-router

安装saas加载器

通过前段路由到指定页面

导入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//导入vue-router组件
import VUE from 'vue'
import vueRoter from 'vue-router'

//导入自定义组件
import Content from '..\component\Content'

//安装路由
Vue.use(vueRoter);

//配置导出路由
export default new vueRoter({
	routers:[
		{
		//跳转路径
		path：'/content',
		name:'content',
		//定义要跳转的组件
		component:Content
		}
	]
})

在main.js里导入路由的配置文件

1
2

//如果是index的话不用写全,vue会自动导入文件
import router from './router'

在app.vue里使用路由页

1
2

<router-link to="/main"></router-link>
<router-link to="/content"></router-link>

路由嵌套

在导出路由是写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Children:[
	{
		//跳转路径
		path：'/content',
		name:'content',
		//定义要跳转的组件
		component:main
	},
	{
		//跳转路径
		path：'/content',
		name:'content',
		//定义要跳转的组件
		component:Content
	}
]

参数传递

router-link标签

1
2

//路由连接的name 属性绑定组件,并添加参数params,注意传参需要v-bind
<router-link :to="{name:'content',params:{id:1}}">content</router-link>

前端通过获取参数

可以通过props解耦

1

C