一，vue简介

2022-10-01 本文已影响0人扶光_

一，什么是vue

vue是一款渐进式的JavaScript框架（就是可以根据需求来引入功能，而不是一次性全部引入）
2013年7月,一位叫尤雨溪的开发者在github上首次提交
vue最独特的特性就是变化侦测，也就是当你修改数据时，视图会进行更新

二，使用

2.1引入

<script src="https://unpkg.com/vue@next"></script>

第一步就是创建vue实例并挂载到想要变化侦测的盒模型中.mount()

 Vue.createApp().mount("#app")

第二步数据选项,在data这个函数中写数据并可以同步在页面中

 Vue.createApp({
        //数据
        data(){
            return {
                msg:"你好vue"
            }
        }
       }).mount("#app")

在页面中使用data里面的数据用{{}}这样的插值写法来展示数据

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

例

当然双大括号也可以说是js表达式,可以解析一些计算+-*/等等

 <p>{{10+2}}</p>

运算

<div>
            {{html}}
        </div>
 html:"<h1>哈哈哈哈哈哈哈哈哈哈</h1>"

不解析html标签

html

下面就介绍指令

三,指令

3.1v-html 解析html标签

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

v-html

3.2 v-if和v-else

  <div id="app">
        <p v-if="flag">显示</p>
        <p v-else>隐藏</p>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
       Vue.createApp({
        //数据
        data(){
            return {
             flag:false
            }
        }
       }).mount("#app")

v-else

v-else只会向上早离自己最近的v-if,中间不可以有其他标签

3.3v-show 控制显示和隐藏

v-show 和 v-if的区别就是,v-show是在元素上加display-"none",这一属性,而v-if是不会让他进入html结构中

 <div id="app">
        <p v-show="flag">显示</p>
        
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
       Vue.createApp({
        //数据
        data(){
            return {
             flag:false
            }
        }
       }).mount("#app")

例
所以当我们页面切换频繁的时候,就用v-show,因为减少了DOM操作负担

3.4 v-bind;当标签属性的值需要动态变化时

 <div id="app">
        <a v-bind:href="url">跳转百度</a>        
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
       Vue.createApp({
        //数据
        data(){
            return {
             url:"https://www.baidu.com/"
            }
        }
       }).mount("#app")

v-bind也可以简写为:的形式
v-bind常用于类名间切换样式等等
也可以两种类名同时使用

 .box{
        width: 100px;
        height: 100px;

    }
    .red{
        background-color: red;
    }
    </style>
</head>
<body>
    <div id="app">
        <div :class="`box ${s}`">

        </div>       
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
       Vue.createApp({
        //数据
        data(){
            return {
             s:"red"
            }

v-bind

数组形式的多种绑定

<div :class="[redClass,activeClass]"></div>
<!--
数据
{
    redClass : "red",
    activeClass : "active"
}

渲染为
<div class="red active"></div>

绑定标签属性,如我们可以动态的改变盒子的高度宽度

 <div class="box" :style="{
            width:w+'px'
        }">

        </div>  

 data(){
            return {
             w:600
            }
        }

style