2021-10-18--Vue学习记录第一天

Vue学习记录第一天

一、了解vue框架

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。     -------摘自vue官网

优点总结：

轻量级框架，双向数据绑定，组件化，主张最少，客户端路由，指令，状态管理

缺点总结：

1、Vue不支持IE8及以下，因为Vue使用了IE8无法模拟的ECMAScript5特性

2、首屏加载过慢，可能会出现闪屏

3、不利于SEO优化

二、Vue使用方法和介绍

先引入：

可以用线上的链接：

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

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

可以下载下来引用相对地址：

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

配置挂载点：

new Vue({
    el:"#app"
})

注意事项：

 el 挂载点，只有在挂载点之内的东西才能按照vue的语法来解析
 1、会按照css选择器来匹配对应的挂载位置
 2、如果匹配到多个挂载点的话，那么只有第一个生效，后面的都不生效
3、不要将vue挂载到html或body上
4、一般情况下我们推荐将vue挂载到id名上，因为id具备唯一性

配置存放数据的地方：

new Vue({
    el:"#app",
    data:{
        name:"张三",
        age:18,
        city:"拉斯维加斯",
        time:new Date().toLocaleTimeString()
    }
})

data是用来存放数据的，里面还可以使用js的方法

配置存放方法的地方：

new Vue({
    el:"#app",
    data:{
        name:"张三",
        age:18,
        city:"拉斯维加斯",
        time:new Date().toLocaleTimeString()
    },
    methods:{
        // 正常写法
        fn1:function(){
            console.log("我是fn1");
        },
        // 简写形式
        fn2(){
            console.log("我是fn2");
        }
    }
})

差值表达式{{}}： 

<h2>{{name}}</h2>
<p>Hello{{name}}</p>
<!-- 可以使用js中的字符串拼接 -->
<p>{{"Hello" + name}}</p>
<!-- 可以使用js中的三目运算 -->
<p>{{flag?'是':'否'}}</p>
<!-- 可以使用js中的方法 -->
<p>{{time.getFullYear()}}</p>
<!-- 不能解析识别HTML标签 -->
<p>{{msg}}</p>

三、Vue的指令

v-text（更新元素内容）

<h2 v-text="name"></h2>
<p v-text="age"></p>
<!-- 可以使用js中的字符串拼接 -->
<p v-text="'Hello' + name"></p>
<!-- 可以使用js中的三目运算 -->
<p v-text="flag?'是':'否'"></p>
<!-- 可以使用js中的方法 -->
<p v-text="time.getFullYear()"></p>
<!-- 不能解析识别HTML标签 -->
<p v-text="msg"></p>

v-html（更新元素内容）

<h2 v-html="name"></h2>
<p v-html="age"></p>
<!-- 可以使用js中的字符串拼接 -->
<p v-html="'Hello' + name"></p>
<!-- 可以使用js中的三目运算 -->
<p v-html="flag?'是':'否'"></p>
<!-- 可以使用js中的方法 -->
<p v-html="time.getFullYear()"></p>
<!-- 可以解析识别标签 -->
<p v-html="msg"></p>

v-on（给元素添加事件）

<!-- 正常写法 -->
<button v-on:click="fn1()">点击执行fn1</button>
<button v-on:click="fn1">点击执行fn1</button>
<!-- 简写形式 -->
<button @click="fn2()">点击执行fn2</button>
<button @click="fn2">点击执行fn2</button>

v-once（这个元素只渲染一次，即使他绑定的数据发生变化了，也不会重新渲染）

<p v-once>{{num}}</p>

v-show（条件渲染，控制元素显示与隐藏，通过display样式来控制元素的显示与隐藏，如果切换频繁的话建议使用）

<button @click="changeFlag()">切换</button>
<p v-show="flag">哈哈哈，我是一段话</p>
<hr>
<p v-show="arr.length>0">有数据</p>
<p v-show="arr.length<=0">无数据</p>

v-if（条件渲染，控制元素显示与隐藏，v-if会引起元素的创建于销毁，如果切换不频繁的话建议使用）

<button @click="changeFlag()">切换</button>
<p v-if="flag">哈哈哈，我是一段话</p>
<hr>
<p v-if="arr.length>0">有数据</p>
<p v-if="arr.length<=0">无数据</p>
<hr>
<p v-if="arr.length>3">长度大于3</p>
<p v-else>长度不大于3</p>
<hr>
<p v-if="arr.length<3">长度小于3</p>
<p v-else-if="arr.length==3">长度等于3</p>
<p v-else>长度大于3</p>

v-model（双向绑定，通常用于表单数据绑定）

<div id="app">
    <p>{{msg}}</p>
    <input type="text" v-model="msg">
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"78910"
        }
    })
</script>

MVVM框架模式

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。在MVVM架构下，View和 Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model数据的变化也会立即反应到View 上。--------------摘自百度

模型和视图部分本没有任何联系，依靠的视图模型，视图模型作为中间的桥梁，当一方发生变化，另一方也会发生变化

v-blind（动态绑定属性）

<!-- 正常写法：v-bind:不仅可以绑定已存在的属性，还可以绑定自定义属性 -->
<img v-bind:src="imgSrc" alt="" v-bind:ha="h">
<!-- 简写形式：v-bind:可以简写成: -->
<img :src="imgSrc" alt="" :ha="h">

<!-- 第一种用法 -->
<span :class="sBack"></span>
<button @click="changeBack1()">黄色</button>
<button @click="changeBack2()">绿色</button>
<button @click="changeBack3()">粉色</button>
<!-- 第二种用法 -->
<span :class="flag?'blue':'pink'"></span>
<!-- 第三种用法，class类型如果里面的样式有冲突，看哪一个类型的css样式写在最后就会展示哪一个样式 -->
<span :class="{pink:true,blue:true,yellow:true}"></span>

v-for（循环数组或对象）

<!-- 循环数组 -->
<ul>
    <li v-for="item in arr1">{{item}}</li>
</ul>
<ul>
    <li v-for="(item,index) in arr1">{{item}}---{{index}}</li>
</ul>
<!-- 循环对象 -->
<ul>
    <li v-for="(value,key) in obj1">{{value}}---{{key}}</li>
</ul>

key

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染.这个默认的模式是高效的。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key，一般情况下我们的key值设置成id，因为id具有唯一性

<ul>
    <li v-for="(item,index) in arr" :key="item.id">{{item.name}}</li>
</ul>