Vue基础知识(一)

1.vue的基本概述:

(1) 什么是Vue : Vue是一套快捷开发前端应用的框架技术

(2) Vue的特点 :

        ① 渐进式框架 : 不论是开发单个的html页面,还是开发多个页面组成的项目,或者说基于Node应用的项目,Vue都提供了完善的技术支持

        ② 双向数据绑定 :声明式渲染是数据双向绑定的主要体现，同样也是 Vue.js 的核心，它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。

        ③ 轻量级框架 : Vue能够自动追踪依赖的模板表达式和计算属性，提供 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，使读者更加容易理解，能够更快上手

        ④ 关注视图层 : 完整的项目应用中，包含前端界面部分和后端数据处理 部分， Vue 只对界面部分的处理进行了完善的支持，对界面部分项目 的开发进行了高效的提升

        ⑤ 项目整合 : 将其他人开发的已有功能项目，很便捷的添加到自己的项目中,提高开发效率

(3)Vue的下载与使用 :

Vue官方网址 : Vue.js (vuejs.org)

基本使用 : 

① 先在html页面引入Vue.js文件

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

  ② 实例化对象

const vm = new Vue({
            // el : 可以将实例对象绑定到一个标签上,从而对标签内容等进行控制
            el: "#app",
            // data : 代表实例中的数据
            data: {
                info: "hello Vue",
            },
        })

 ③ 在标签中简单使用data中的数据

<div id="app">
        {{ info }}
    </div>

 2.Vue的基础语法 : 

(1) 差值表达式 : Vue中的一种固定语法 : {{ 变量 }} , 用来渲染输出变量的数据

<div id="app">
        <p>{{ vis }}</p>
        <p>{{ "插值表达式进行拼接 " + vis }}</p>
        <p>{{ num + 66 }}</p>
        <p>{{ say(vis) }}</p>
        <p>{{ tag ? vis : num }}</p>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                vis: "hello Vue",
                num: 88,
                tag: true
            },
            // methods用来存放实例方法
            methods: {
                say(str) {
                    return str.split('').reverse().join('')
                }
            }

        })

 (2) 指令 : Vue 中的一个功能组件，用来封装简单的DOM操作 , 实现了一些DOM操作功能

① v-show 与 v-if 

它们都可以控制标签的隐藏与显示,有一定的区别 , 当它们的值为true是代表显示标签 , 为false时隐藏标签。

<div id="app">
        <!-- v-show 是利用display : none 来控制元素是否显示与隐藏 -->
        <!-- v-if 是通过直接控制元素是否加载来控制元素的显示与隐藏 -->
        <p v-show="tag">好好学习</p>
        <p v-if="tag">天天向上</p>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                tag: true
            }
        })
    </script>

 ② v-text 与 v-html

它们可以来设置标签的文本内容, v-text 只能将变量以纯文本的形式渲染 , v-html会进行解析渲染,能够识别标签

<div id="app">
        <p v-text="vis"></p>
        <p v-html="info"></p>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                vis: "今天",
                info: "<h1>今天</h1>"
            }
        })
    </script>

 ③ v-bind : 动态操作标签的指令 , 可以使标签属性接收变量数据或者表达式等

<div id="app">
        <!-- v-bind可以动态的操作标签,将标签值用变量或者表达式代替 -->
        <!-- v-bind:class='值'可以简写为:class='值' -->
        <p v-bind:title="info + 333">hello Vue!!</p>
        <p :title="info ? '今天' : '好好学习'">hello Vue!!</p>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                info: 666
            }
        })
    </script>

 ④ v-on : 用于给标签添加事件处理的指令

语法 : 

<div id="app" v-on:click="事件处理函数"></div>

也可以简写为:

<div id="app" @click="事件处理函数"></div>

基本使用 : 

    <div id="app">
        <!-- v-on可以监听事件 -->
        <button v-on:click="info ? num=9:num=999">按钮1</button>
        <button @click="maySing">按钮2</button>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                info: "信息",
                num: 8
            },
            methods: {
                maySing() {
                    console.log("认真学习");
                }
            }
        })
    </script>

⑤ v-for : 列表渲染指令，循环遍历集合数据，如数组中的多项数据

注意：循环遍历的数据，每一条数据可能发生新增/修改/删除的操作，为了保持 数据的状态需要添加一个 key 属性绑定数据状态

v-for 还支持一个可选的第二个参数，即当前项的索引。

语法 : 

<li v-for="Arrs in Arr" :key="Arrs"></li>

案例 : 

<div id="app">
        <ul>
            <input type="text" v-model="vis"> <button @click="add">添加数据</button>
            <li v-for="(Arrs,index) in Arr" :key="Arrs">
                <input type="checkbox">{{ index }} {{ Arrs }} 
                <button v-on:click="dl(index)">删除</button>
            </li>
        </ul>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                vis: '',
                Arr: ['今天', '天气', '真好']
            },
            methods: {
                add() {
                    this.Arr.push(this.vis);
                    this.vis = ''
                },
                dl(index) {
                    this.Arr.splice(index, 1)
                }
            }
        })

3 . 样式处理 : 

（1) class样式处理 :

         样式的处理有两种操作方式

                ① 对象格式：通过变量控制某个样式是否生效

                ② 数组格式：通过定义多个变量和样式名称映射的形式，使用数组表达式设置多个样式

<div id="app">
        <!-- class样式的处理,使用v-bind对class属性进行控制,添加对应样式的类名 -->
        <p v-bind:class="[mClass1,mClass2,mClass3]">好好学习,天天向上</p>
        <p v-bind:class="{active1:istag}">好好学习1,天天向上1</p>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                istag: true,
                mClass1: "active1",
                mClass2: "active2",
                mClass3: "active3",
            }
        })
    </script>

（2) style样式处理

        样式的处理有两种操作方式：行内样式的处理上，了解它的基本语法即可，一 般项目处理中很少使用

        ① 对象格式

        ② 数组格式

<div id="app">
        <!-- style样式处理 -->
        <p v-bind:style="{backgroundColor:sbackground,color:sColor}">好好学习</p>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                sColor: "red",
                sbackground: "blue",
            }
        })
    </script>