手把手教你玩转Vue

什么是VUE

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

VUE.js的安装

  先创建一个 .html 文件，然后通过如下方式引入 Vue：

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

基础语法

// vue的双向绑定原理及实现
<div id="app">
        <input type="text" v-model="msg">
        <p>{{ msg }}</p>
    </div>
    //引入vue.js
    <script src="js/vue.js"></script>
    <script>
    //实例化对象
        const app = Vue.createApp({
            data() {
                return { msg: "你好vue" }
            }
        })
        var vm = app.mount("#app");
        
    </script>

指令系统

1. v-bind
   功能：绑定变量，可缩写成: 或 . (当使用 .prop 修饰符时)

<div :id="text"></div>
<!-- 代码说明：将text变量绑定到id属性 -->

在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

2. v-text
   功能：绑定标签内显示内容

<div v-text="text">{{text}}</div>
<!-- 代码说明：指定了标签内的文字内容，相当于innerText -->

3. v-html
   功能：以html形式渲染变量内容

<div v-html="html"></div>
<!-- 代码说明：将html变量以html的形式添加到标签内，相当于innerHTMl -->

4. v-show
   功能：隐藏节点的显示

<div v-show="flase"></div>
<!-- 代码说明：相当于display：none，虽然不进行节点渲染，但是dom对象一直存在，适用于频繁切换的场景 -->

5. v-if
   功能：隐藏节点的显示

<div v-if="true"></div>
<!-- 代码说明：相当于appendChild，removeChild，直接将dom对象添加或者删除，适用于不频繁切换的场景，与v-if配合使用的有，v-else，v-if-else -->

6. v-for
   功能：循环产生同一个组件

<ul>
<li v-for="item in items" :key="item">{{item.name}}</li>
</ul>
<!-- 代码说明：items是一个数组或者对象，将其中每一项都渲染出一个li，值得注意的是每一个li都需要一个独一无二的key，这样才能保证每次重新渲染的时候，只会更改key产生变化的节点，减少了开销，而且不能使用数组的index作为key，因为数组每一项对应的index会产生变化。 -->

7. v-on
   功能：为节点绑定事件，可简写成@

<div @click="open"></div>

响应API

1. computed
   接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象。

 <!-- 利用computed 将输入的文字进行翻转 -->
    <div id="app">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
        <p>{{rmsg}}</p>
    </div>
    <script>
        Vue.createApp({
            computed:{
                "rmsg":function(){
                    return this.msg.split("").reverse().join("")
                }
            },
            data() {
                return {
                    msg:"你好呀 Vue"
                }
            },
        }).mount("#app")
    </script>

2. watch
   watch API 完全等同于组件侦听器 property。watch 需要侦听特定的数据源，并在回调函数中执行副作用。默认情况下，它也是惰性的，即只有当被侦听的源发生变化时才执行回调。

<!-- 利用watch 对数据进行监听 -->
    <div id="app">
        <button @click="num++">{{num}}</button>
        <button @click="num+=5">{{num}}</button>
    </div>
    <script>
        Vue.createApp({
            //watch 监听:检测数据的变化,并执行回调函数
            watch:{
                num:function(nval,oval){
                    console.log("数据由"+oval+"变化成"+nval)
                    localStorage.setItem("num",nval)
                }
            },
            data() {
                return {
                    num:0
                }
            },
        }).mount("#app")
    </script>

3. directives
   注册自定义的指令,对普通 DOM 元素进行底层操作，就会用到自定义指令.

<div id="app">
        <input type="text" v-focus="flag">
        <button @click="flag=!flag">获取焦点</button>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    flag:true,
                }
            },
            //自定义执行:操作dom
            directives:{
                //指令的名称是focus
                "focus":{
                    //mounted 定dom节点挂载后执行
                    //beforeUpdate 更新前
                    beforeUpdate(el,binding) {
                        //el 指令所在的dom节点
                        //binding.value 指令的值
                        console.log(el,binding)
                        //如果值为真则获取焦点 否则失去焦点
                        if(binding.value){
                            el.focus()
                        }
                    },
                }
            }
        }).mount("#app")
    </script>