Vue.js 第1章 Vue常用指令学习

今日目标

能够写出第一个vue应用程序

能够接受为什么需要学vue

能够使用指令

能够通过指定完成简单的业务(增加删除查询)

能够理解mvvm

为什么要学习vue

企业需要
可以提高开发效率

实现vue中的 HelloWorld

让一个变量的内容能够在页面中展示

目标
- 如何引入vue.js文件
- 如何创建vue对象
- 如何定义vue中的数据成员
- 如何定义模板
- 如何让数据和模板进行关联
通过这个案例可以创建一个简单的Vue页面
实现过程

引入js

<!-- 1.引入vue.js文件 -->

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

创建vm实例

 var vm = new Vue()

定义vm实例的成员

 var vm = new Vue({

     // 5.指定当前Vue实例所对象的模板。通过el指定。这个el名字不能改哦

     el:'#app',

     // 3.定义数据成员-属性--名称只能是data

     // data是一个对象，里面可以存储任意类型的数据

     data:{

         msg:'HelloWorld',

         age:20

     }

 })

创建模板

<div id='app'>

</div>

添加插值表达式用于展示指定名称的数据

 <!-- 6.使用插值表达式展示指定的数据 -->

{{msg}}

能够理解mvvm

目标：能够明白vue是如何工作的
m:model:数据模型
v:view:视图--模板
vm:vue实例：实现数据和模板的关联

####常见报错：

Property or method "msg" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option

当前vm实例中，属性或方法没有定义，但是在渲染的时候你却需要使用：确保这个成员或者属性你已经定义了。

Error compiling template

一定是模板写错了，不符合模板的语法

[Vue warn]: Error compiling template:

<div id="app">

    <a href="">{{msg}}</a>

    <span v-text="{{msg}}"></span>

</div>

- invalid expression: v-text="{{msg}}"

说明{{}}表达式不能通过指令的方式来使用

<p v-model="msg">: v-model is not supported on this element type. If you are working with contenteditable, it's recommended to wrap a library dedicated for that purpose inside a custom component.

当前p元素不支持v-model,你应该换成input select textarea

能够使用指令

目标：

明白什么是指令
知道指定如何使用
知道不同的指令有什么样的功能，主要用在什么样的场景

#####插值表达式：{{}}

它到底有那些使用场景
它到底能怎么用
作用:可以实现内容的替换：使用指定的成员值替换插值表达式
特点：
- 双大括号：{{}}
- 只能写在标签之间--双标签
- 这个值必须先定义好
其它常见的使用方式：
- 可以写表达式
- 可以实现实现运算
- 实现添加三元表达式
- 不能直接添加js逻辑结构

v-text

指令就相当于之前html标签的属性 <标签属性=‘值’>，它的使用方式和属性基本一致 <标签指令=‘值’>

目标：

作用：相当于{{}}，可以在标签之间添加数据指定=“data中定义的成员”
什么场景使用：不想使用{{}},也可以使用v-text

v-html

目标：

明确v-html和v-text的区别
- v-text会将内容原样输出，不解析不编译
- v-html会将内容按html语法进行解析之后再输出解析的结果
使用场景
- 当你需要将数据进行html语法解析的时候使用

v-bind

目标

作用：可以实现网页标签属性值的动态绑定：这个标签的属性值是动态变化的。再说折一点：我想为标签的属性值绑定一个变量
使用场景：当标签的属性值是动态变化的时候变需要使用v-bind
如何使用
- <标签 v-bind:属性=“值">
- 值可以是Data中定义的变量。值必须先定义好
- 简写：
- 动态绑定样式
- 动态设置样式变量

<div id="app">

     <div :class="{box:isCollopse}"></div>

    <button @click='isCollopse = !isCollopse'>展开和合并</button>

    <p :class="[hasRed,hasunder]">这是p元素</p>

    <p :style="{ fontSize: size + 'px' }">没写字</p>

</div>

v-for

目标：

作用：实现循环，可以循环遍历数组或对象
使用场景：动态渲染
如何使用：你想循环遍历生成谁，就在谁的结构中添加v-for
- 遍历数组：v-for="(value,index) in arr"
  - value：数组中的值
  - index:值所对应的索引
  - 如果需要两个值就应该使用()包含，如果只需要其中一个值没有必要使用()包含，但是无论如何第一个值永远是value
- 遍历对象:v-for="(value,key,index) in obj"
  - value：数据对象的值
  - key:数据对象的键
  - index:数据对象的索引
- 示例

<tbody>

    <tr v-for="value in stuList">

        <td>{{value.id}}</td>

        <td>{{value.name}}</td>

        <td>{{value.age}}</td>

    </tr>

    <!-- <tr v-for="value in stuList">

            <td v-for="(v,key) in value">{{v+":"+key}}</td>

    </tr> -->

</tbody>

v-model

作用：实现双向数据绑定：你修改数据，页面中有相应的变化，修改页面中的数据，数据源数据有相应的变化
如何使用：v-model='值'
使用场景：有限制：只有input,select,textarea可以来实现v-model
- 将来你想收集用户数据的时候就可以使用v-model来实现

<div id="app">

    <!-- <input type="text" :value="msg"> -->

        用户名：<input type="text" v-model='username'> <br>

        密码：<input type="password" v-model='userpass'> <br>

        <button @click='login'>登陆</button>

</div>

v-on

作用：绑定事件监听器：说白了就是为元素绑定事件
如何使用
- 语法：<元素 v-on:事件名称=‘事件处理函数’>
- 一般这种自定义的事件的处理函数都会写在methods属性中(属性》》对象)
- 建议使用简写：<元素 @事件名称=‘事件处理函数’>
细节：
- 有关参数传递的细节
  - 如果没有传递参数，就默认传递$event
  - 如果手动传递了参数，那么$event就需要手动传递
- 修饰符：可以在绑定事件后添加设置，让事件能够产生某个行为
  - @click.修饰符=‘事件处理函数’
  - 常用修饰：.stop（阻止事件冒泡）:prevent(阻止默认行为)
  - 键修饰符：一般是针对于输入框而言

<input type="text" @keyup.enter='dodo' v-model='myname'>

<input type="text" @keyup.13='dodo' v-model='myname'>

v-if 和v-show

目标：

作用：
- v-if可以根据值来决定这个元素是否需要渲染(说白了就是页面中是否有这个元素的dom结构)
- v-show可以根据值来决定这个元素的display样式的值(none,block)
使用方式：
- v-if='bool值|表达式'
- v-show='bool值|表达式'
区别：
- v-if:通过是否渲染元素来决定元素是显示还是不显示
- v-show是通过控制元素的display样式的值来决定元素显示还是隐藏
使用场景
- v-if:用户提示，它会反复的渲染元素，如果频繁的实现元素的显示和隐藏，不建议使用v-if,它会频繁的渲染页面的结构，造成渲染负担--异步操作一般考虑使用v-if
- v-show:当元素频繁的进行显示和隐藏的时候就应该使用v-show,因为它并没有真正的销毁这个元素，可以节省创建元素的时间

v-if v-else v-else-if

作用：分支判断

细节： v-else v-else-if不能单独存储，必须先有v-if

使用方式：

<div id="app">

    <input type="text" v-model='score'>

    <p v-if="score>=90">A</p>

    <p v-else-if="score>=80">B</p>

    <p v-else-if="score>=70">C</p>

    <p v-else-if="score>=60">D</p>

    <p v-else>E</p>

</div>

v-cloak

作用：可以隐藏元素的显示，直到你认为可以显示了才会出现。这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。