文库 Vue的知识摘抄 看懂 多敲代码10遍6遍

Vue核⼼介绍

1：VUE基本认知

1、线上课程所有⼈都必须要录屏

2、作业，私发

3、按照要求进直播间

4、加强⾃⼰管理（课堂，课后）

1：vue介绍

1) 渐进式 JavaScript 框架（有2个库，核⼼库和插件库，如果能⽤核⼼库解决的就是⽤核⼼库，核⼼库解决不了的，就使⽤插件库）渐：逐渐，进：添加

2) 作者: 尤⾬溪(⼀位华裔前 Google ⼯程师)

3) 作⽤: 动态构建⽤户界⾯，动态DOM操作，js

2：官⽹

3：特点

1)遵循 MVVM 模式 , model view vm ViewModel

2)编码简洁, 体积⼩, 运⾏效率⾼, 适合移动/PC 端开发

3) 它本⾝只关注 UI, 可以轻松引⼊ vue 插件或其它第三库开发项⽬

4：与其他框架关系

1) 借鉴 angular 的模板和数据绑定技术（核⼼是模板语法和数据绑定）

2) 借鉴 react 的组件化和虚拟 DOM 技术（核⼼是组件化）

Vue其实是整合了2个框架的优势

5：vue扩展插件

1) vue-cli: vue 脚⼿架

2) vue-resource(axios): ajax 请求

3) vue-router: 路由， vue

4) vuex: 状态管理

5) vue-lazyload: 图⽚懒加载

6) vue-scroller: 页⾯滑动相关

7) mint-ui: 基于 vue 的 UI 组件库(移动端)

8) element-ui: 基于 vue 的 UI 组件库(PC 端)

2：VUE基本使⽤

1：基本使⽤

Vue其实就是⼀个js框架，写的内容和⽅式还是和以前js⼀致。在html中书写的位置也是和以前js⼀致。只是⽤法和以前的有点出⼊⽽已。

1). 引⼊vue.js（可以引⼊线上，也可以引⼊⾃⼰下载的）

2). 创建Vue实例对象(vm), 指定选项(配置)对象

el : 指定dom标签容器的选择器，表⽰管理的范围

data : 初始化数据（页⾯可以访问），以及数据的绑定变量。

3）.在html标签上使⽤双向数据的绑定：v-model， v- vue指令，写在html的开始标签内

v-model 声明的变量必须在vue的data中声明。否则报错

4). 在页⾯中使⽤⼤括号表达式{{mes}}来取值显⽰数据, 取data中的值

<div id="app">

<input type="text" v-model="mes">

<p>Hello {{mes}}</p>

</div>

<script>

var app = new Vue({

el: '#app',

data: {

mes: 'Vue!'

}

})

</script>

注意：vue的管理范围只能在所选择的标签内。

第⼀个vue指令，使⽤v-model实现数据的双向绑定！

需求：在输⼊框内输⼊内容，在标签上实时的显⽰上⾯输⼊的内容

分析：在输⼊框中使⽤v-model指令获取vue实例中data中的初始化数据，然后修改输⼊框中的内容，将输⼊框内容和data中的内容实现绑定，

然后将最终的数据使⽤⼤括号表达式在另外标签中取出即可

2：vue开发者⼯具使⽤

在官⽹下载devtools的插件，然后将这个插件拖⾄浏览器的拓展插件中就可以使⽤了。

其实就是⼀个⾕歌浏览器的插件，灰⾊的表⽰没有使⽤vue，绿⾊的则是使⽤了到了vue，

打开检查后会多⼀个vue的选项，出现⼀个root就表⽰创建了⼀个VM对象，其实就是⼀个VUE对象。

⼀般情况下，model就说vue对象中的data数据.

当vue实例的数据发⽣变化时，会实时的更新。可以通过浏览器观察。

3：理解vue的MV VM

Model: 模型，数据对象，其实就是vue对象中的data数据。

View: 视图，指的是页⾯视图，给⽤户看的内容，其实就是vue管理的那⼀⽚区域的html代码；

ViewModel: 视图模型，就是创建的VUE实例/对象，他的核⼼有2个，⼀个是DOM监听，⼀个是数据绑定。

通过vm对象，实现将内存中的model数据，实时的展⽰在⽤户可以看到的view页⾯上！！先通过监听，然后实现数据的绑定。

3：模板语法

1. 模板的理解:

动态的html页⾯（页⾯元素的动态，数据的动态）

包含了⼀些JS语法代码

1、插值表达式/双⼤括号表达式｛｛ mes｝｝，在⼤括号表达式（插值表达式）中还可以调⽤⽅法；

2、指令(以v-开头的⾃定义标签属性)，如 v-model, v-if ,v-for, v-else, v-show ----

2. 双⼤括号表达式

语法: {{exp}}

功能:

1: 向页⾯输出数据，从data中读取数据，然后显⽰在页⾯上；

2: 可以调⽤对象的⽅法, 如：将字符串变成⼤写

需求：

1：在vue实例中声明数据，在指导的标签中使⽤双⼤括号表达式取值展⽰

2：在双括号表达式中还可以调⽤⼀些简单的⽅法，如全部变成⼤写。

3. 指令⼀: 强制数据绑定

功能: 将标签的属性值从⼀般的⽂本变成⼀个表达式；

如在data数据中定义⼀个图⽚的imgurl, 然后在img标签的src属性中使⽤⼤括号表达式是⽆法显⽰图⽚的，

此时可以强制绑定数据，使⽤v-bind:属性名 = 属性值（data中的key）

被v-bind修饰的属性就不在是以前的单纯的属性了，此时是⼀个表达式，表达式中的内容来源于vue中的数据

完整写法:

v-bind:xxx='yyy' //此时的yyy就不是⼀个简单的⽂本了，⽽是把yyy作为⼀个表达式，会从vue实例中去查找yyy对应的值；

简洁写法: v-bind可以省略不写，如果有的⼯具报错，请将编译器调整为ES6的语法；

:xxx='yyy'（这样的效果和上⾯是⼀样的）

记住：如果具体的值在vue实例中，这个值⼜是html标签的某个属性对应的值，如果希望引⽤的话，则需要使⽤强制数据绑定，强制数据绑定不需要⼤括号表达式，只需要data中的key

4. 指令⼆: 绑定事件监听

功能: 绑定指定事件名的回调函数

以前绑定时间的语法是onclick = “test()”,vue 的语法规则如下：

完整写法: 在标签中使⽤v-on的指令；

v-on:click='xxx'，绑定⽅法的时候可以加括号也可以不加；

<button v-on:click="test">点我试试看</button>

简洁写法: 可以直接使⽤@符号

@click='xxx'

具体执⾏的⽅法需要在vue的实例中使⽤methods声明，

new Vue({

el: '#app',

data: {

content: 'NBA I Love This Game'

},

methods: {

test () {

alert('你的胆⼦很⼤啊')

}

}

})

注意：如果⽅法需要传参的话，可以直接传递data中的数据，也可以⾃⼰定义数据。

<button @click="test2(mes)">点我试试看</button>

methods: {

test(){

alert("你胆⼦太⼤来 ")

},

test2(mes){

alert(mes)

}

},

4：计算属性和监视

1. 计算属性

在computed属性对象中定义计算属性的⽅法，

在页⾯中使⽤{{⽅法名}}来显⽰计算的结果（如果需要）

语法：

<input v-model="属性值">

Vm:

computed: {

属性值(){ // 计算属性中的⼀个⽅法，该⽅法的返回值就是标签的属性值，属性值会显⽰在页⾯中,或者属性值：function()

return xxx; // 返回的具体内容必须是data中声明的变量。

}

}

注意：

1、当某⼀个标签的属性值是通过2个以上的值确定并且是⼀个动态的，此时可以考虑使⽤计算属性来实现。

2、计算属性的⽅法名是最终显⽰结果标签的属性值，该⽅法⼀般需要⼀个返回值，该返回值就是最终需要展⽰的结果，

如果需要在页⾯中显⽰，可以使⽤⼤括号表达式取值，如果使⽤⼤括号表达式的话，不需要在data中声明，如果是使⽤v-model展⽰的话，需要在data中声明。

3、使⽤v-model声明的数据绑定，必须要在vue的data中进⾏声明，否则报错。

4、计算属性中的值是需要计算得到的，所以不需要在vue的data中进⾏声明。

5、在函数中可以使⽤Number() ⽅法将字符串转换为数字，如果⽆法转换则结果为NaN, 也可以直接在属性中使⽤V-MODEL.number来实现转化

2. 监视属性:

上⾯的案例也可以使⽤全局的监视⽅式实现。

通过vm对象的$watch()⽅法或watch属性配置来监视指定的属性

当属性变化时, 回调函数⾃动调⽤, 在函数内部进⾏计算，

语法：watch属性

Vm:

data: {

a: 1,

b: 2

}

watch: {

属性值: function(value){ // 对可能变化的属性值进⾏监视，当属性值发⽣变化时调⽤该⽅法，value是最新的值。

this.a = this.b + value ; // 注意：a,b 都应该是在 data 中出现过，最后将结果显⽰在属性值为 a 的标签中

}

$watch() ⽅法的监监视：

// vm 是vue的实例对象

vm.$watch('属性值', function(value){ // value 是监视的值发⽣变化的最新值

this.a = this.b+""+value;

})

计算属性， vue的指令

课堂内容写2遍，

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<!-- <script src="js/jquery-1.12.4.js"></script> -->

<!-- vue 其实和jquery ⼀样的，都是js框架，也是⼀个js⽂件 -->

<script src="js/vue.js"></script>

</head>

<body>

<h2>hello vue </h2>

<!-- 简单的div标签，被vue所管理的标签都应该在div内部 -->

<div id="app">

<!-- 需求：在输⼊框中输⼊⼀些内容，实时的展⽰在span标签中

v-model 双向数据绑定 , 所指向的这个值必须要在data中进⾏声明

-->

<input name="uname" v-model="uname"><br>

<input name="uname" v-model="uname"><br>

<span>{{uname.toUpperCase()}}</span>

<!-- 需求：从data中获取图⽚的地址

src="imgurl"他会被认为这是⼀个简单的字符串，希望他不仅仅是⼀个字符串更希望他是⼀个表达式，能将data中的数据拿上来使⽤

vue 中提供了 v-bind ,将属性中的内容变成表达式,

语法： v-bind:属性 = “变量” 变量来源于vue实例的data中 ,

在使⽤中，v-bind可以省略不写，简写的⽅式为 :属性=“变量”

-->

<img v-bind:src="imgurl" :width="wid" :height="hei">

<!-- 绑定事件

v-on:事件名称 = “⽅法名”

如： v-on:click = “hello()” , 当点击事件发⽣的时候，会访问hello的⽅法

-->

<button v-on:click="hello()">你敢点么</button>

<!-- 只要出现input ，就会使⽤v-model

如果绑定的事件⽅法在执⾏的时候需要参数的话，可以直接的传递

也可以从vue的实例对象中进⾏获取，

-->

<input v-on:blur="world('111')" v-model="mes">

</div>

<script>

// js代码在哪⾥编写，现在还是在哪⾥写

// js 数组， var arr = new Array(num)

// {} ⼤括号表⽰⼀个对象，配置对象

// 1，管理的范围 , el

// 2, data 数据，管理标签中所有的内容，变量，对象等，数据的初始化var vm = new Vue({

el: "#app",

data: {

uname: "",

pwd: "",

imgurl: 'img/bb.jpg',

wid: '300px',

hei: '200px',

mes: ''

},

methods: {

// 所有的⽅法都是定义在这⾥的

hello(){

alert("你还真敢点啊")

},

world(value){

//在⽅法中如果希望使⽤data中的数据的话，可以直接的使⽤,

// 注意：需要在变量前⾯加this

// alert(this.mes) ✔

alert(value)

}

},

});

// $(function(){

// alert("jquery")

// })

</script>

</body> </html>