Vue2基础（一）

Vue简介

Vue是一个渐进式的前端框架，什么是渐进式的呢？ VUE全家桶

​ 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex+axios，也可以满足你各种各样的需求。

Vue的特点和Web开发中常见的高级功能：

​ 1、解耦视图和数据

​ 2、双向数据绑定

​ 3、可复用的组件

​ 4、前端路由技术

​ 5、状态管理

​ 6、虚拟DOM

1、 Vue基本语法

	<div id="app">
        <!-- 语法解析vue中定义的变量 -->
        {{str}}
    </div>
    <script>
        // 生成一个Vue实例对象
        new Vue({
            el:'#app',    // el→element的缩写，找到需要绑定的元素
            // 定义变量/数据
            data:{
                str:'嘀咕嘀咕'
            }
        })
    </script>

{{}}插值语法：控制标签显示内容，固定的，里面是一个js环境，仅适用于有结果的表达式（变量/简单表达式）

2、 标签属性的修改

v-bind:动态操作标签属性

​ 语法：v-bind:属性名=“属性值”

​ 简写：:属性名=“属性值”

​ ""中间相当于一个js环境，可以书写简单的表达式

<a v-bind:href="url1">百度一下</a>
<a :href="url2">淘宝一下</a>

3、 绑定事件

​ 语法：v-on:事件名=“值”

​ 简写：@事件名=“值”

<button v-on:click="num--">-1</button>
<button @click="num++">+1</button>

4、 函数调用表达式

	   new Vue({
            el:'#app',
            data:{
                num:10
            },
            // 定义方法
            methods:{
                // 在方法中使用vue定义好的数据前面要加this
                add:function(){
                    this.num++
                },
                addFive(n){
                    this.num += n
                }
            }
        })

5、 Vue控制类名

 		<!-- 控制类名使用对象的形式动态设置类名 -->
        <p :class="{active:bool?'active':'',current:'current'}">{{num}}</p>
        <!-- 控制类名使用数组的形式只要这个数据项有这个类就会有 -->
        <p :class="['active','current']">{{num+10}}</p>

6、 v-if和v-show

		<!-- v-if后面的值是false表示删除了DOM 有DOM操作的 -->
        <p v-if="bool1">第一个p标签</p>
        <!-- 只是在样式层面的隐藏 -->
        <p style="display: none;">第二个p标签</p>
        <!-- v-show只是样式层面的显示和隐藏不涉及到DOM操作 -->
        <p v-show="false">第三个p标签</p>
        <button @click="bool1 = false">删除第一个标签</button>
        <hr>
        <!-- v-if和v-else使用注意点：中间不能有其余的标签，必须是挨着的兄弟元素 -->
        <p v-if="bool2">第四个p标签</p>
        <p v-else>第五个p标签</p>
        <hr>
        <p v-if="type=='a'">第1个p标签</p>
        <p v-else-if="type=='b'">第2个p标签</p>
        <p v-else-if="type=='c'">第3个p标签</p>
        <p v-else>第4个p标签</p>

7、 v-for

v-for:遍历数组对象集合……

​ 语法：v-for=“参数1，参数2… in 数组名/对象名”

​ 数组：

​ 参数1 -→ 数据项

​ 参数2 -→ 索引

​ 对象：

​ 参数1 -→ 值

​ 参数2 -→ 键

		<ul>
            <li v-for="item,index in list">{{item}} [{{index}}]</li>
        </ul>
        <hr>
        <ul>
            <li v-for="value,key in obj">{{key}}:{{value}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="item in arr">{{item.name}}:{{item.age}}</li>
        </ul>

8、 v-model

v-model:实现数据双向绑定

​ 实质：改变了v-model的值从而改变了txtVal的值

<input type="text" v-model="txtVal">
<p>{{txtVal}}</p>
<script>
        new Vue({
            el:'#app',
            data:{
                txtVal:'初始值',
            }
        })
    </script>

9、如何 引入Vue

方式一：直接CDN引入

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

方式二：下载和引入

// 开发环境 https://vuejs.org/js/vue.js
// 生产环境 https://vuejs.org/js/vue.min.js

方式三：NPM安装

10、 行内样式的控制

<p :style="[{width: wid,height:'100px'},{backgroundColor:'pink'}]">{{num}}</p>