Vue基本使用

什么是Vue.js?

Vue.js是一套构建用户界面的渐进式框架。

Vue.js是前端三大框架之一，和 Angular.js、React.js，并成为前端三大主流框架

 

使用框架的目的：

1、提高开发效率

2、  能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】

 

框架和库的区别

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目

库（插件）：提供某个小功能，对项目侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。

 

MVC和MVVC的区别

 

MVC:是后端的分层开发理念；

Modell：模型层 连接数据库

View:视图层 和用户打交道，发送请求，接受响应

controller:调度层 调度View 和 Model  接受请求，处理请求，接收响应，返回响应

MVVC是前端视图层的概念，主要关注于视图层分离，也就是说MVVM把前端的视图层，分为三部分Model 、View、VM:ViewModel

Model:模型层 接触的是前端请求的数据和业务逻辑

View:视图层 界面展示

VM:调度层  链接View、Model

 

Vue.js的代码结构

（1）引入Vue.js

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

（2）写视图层 ，我们要展示的内容

<div id='app'>

    </div>

（3）实例化Vue()

data:{} 存放数据

el:"" 控制是那块视图

methds:{}放我们的方法

 

const vm= new Vue({

el:"#app",

data:{

},

methods:{

}

})

 

注意：都是通过this对象去拿的，通过this也可以调用方法。写方法的时候我们需要注意this的指向问题。

 

插值表达式  v-clock v-text  v-html

插值表达式 {{}}，可以在前后插入一些内容

v-text:会替换掉元素的内容 ,不解析富文本

v-html:可以渲染html界面 解析富文本，也会换掉元素的内容

v-clock:如果网速慢，而该标签内容是变量没有请求响应回来的时候，页面上先不显示该标签（vue给该标签加了css样式），当响应回来的时候改标签默认将css样式去除。此指令可以解决使用插值表达式页面闪烁问题
将该指令加在html标签中时，可以在该文件中加style属性为display：none

<style>

[v-clock]{

display:none

}

</style>

<div id='app'>

        <div v-clock>{{msg}}</div>

    </div>

 

v-bind 界面元素属性值绑定

• 括号里不加引号的都是我们data里的数据读取
• 如果想使用字符串需要加上引号
• 里面可以写表达式
• 里面也可以调用定义好的方法，拿到的是方法的返回值

<div id="app">

<div v-bind:title="msg">123</div>

<div><img v-bind:src="imgUrl" alt=""></div>

 

简写

<div :title="msg">123</div>

<div><img :src="imgUrl" alt=""></div>

</div>

 v-on  事件绑定

<button v-on:click="log9">按钮</button> -->

简写

<button @click="log9">按钮</button>

<script>

var vue = new Vue({

        el:"#app",

        data:{

            msg:"鸡汤来啦！！！",

            imgUrl:"https://plastic-shop.nos-eastchina1.126.net/picture/%E8%BD%AE%E6%92%AD%E5%9B%BE3-1464078721357971456.png",

        },

        methods:{

            log9(){

                console.log(999);

                this.imgUrl="https://plasticshop.noseastchina1.126.net/picture/%E8%BD%AE%E6%92%AD%E5%9B%BE1-1464078263532912640.png"

            }

        }

    })

</script>

 

事件修饰符：

（1）.stop  阻止冒泡

（2）.prevent  阻止默认事件

（3）.capture  添加捕获模式

（4）.self  只当事件在该元素本身（比如不是子元素）触发时触发回调

（5）.once 事件只触发一次

 

v-model  数据双向绑定

a)  注意：绑定的是表单控件

 

样式的使用

<style>

.red{

color:red;

}

.pink{

color:pink;

}

.fs50{

font-size:"50px"

}

</style>

<script>

const vm= new Vue({

el:"#app",

data:{

class:["red","fs50"],

flag:true,

class2:[

{red:true},

{fs50:true}

],

class3:{

red:true,

fs50:true

},

style1:{"color":"red"}

},

methods:{

styledemo(){

return{color:"green"}

}

}

})

</script>

class添加样式

（1）数组

<div :class="class">123</div>

（2）三目表达式

<div :class="flag?'fs50':'red'">123</div>

（3）数组内置对象

<div :class="class2">123</div>

（4）直接通过对象

<div :class="class3">123</div>

 

style添加样式

对象

<div :style="style1">456</div>

函数返回值

<div :style="styledemo()">123</div>

 

v-for 和key 属性  key只能是数字和字符串

v-for

（1）遍历数组

<div v-for="(item,index) in 数组名 "  :key="index"></div>

（2）遍历对象

<div v-for="(value（对象的值）,key（对象的键）,index（数组的下标）) in 对象名" ></div>

（3）遍历数字

<div v-for="num in 10">{{num}}</div>

 

注意：

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

 

 

v-if  与  v-show

 

区别：

v-if  删除dom元素

v-show 设置display:none

 

a)         应用场景：

        i.         v-if只修改一次的时候可以使用v-if

      ii.         v-show频繁切换的时候可以使用v-show

还有v-else 和v-else-if

这两个不能单独使用

只能使用v-if是配合使用  

<div v-if=""></div>

中间不能有其他任何语句，只能挨着使用

<div v-else-if=""></div>

<div v-else=""></div>