Vue入门

一、Vue的使用

        Vue使用最多的版本是2xx和3xx。两者的使用方式有一定的区别。

//Vue2
<div id="app">
    <p>{{msg}}</p>
</div>
<script>
    //vue2的方式
    new Vue({
         el:"#app",
         data:{
             count:0,
             msg:"hello"
         }
     })
</script>

//Vue3
<div id="app">
  {{ message }}
</div>
<script>
    const VueApp = {
      data() {
        return {
          message: 'Hello Vue!!'
        }
      }
    }
    Vue.createApp(VueApp).mount('#app')
</script>

二、指令

        Vue中双大括号为插值表达式，因此刷大括号中可以写任何表达式，语句则是错误写法。

<div id="app">
    <p>{{title}}</p>
    <p>{{count>18?'yes':'no'}}</p> 
    <!-- 下面的是错误，为语句 -->
    <!-- <p>{{if(count){return 666}}}</p> -->
</div>
<script>
    const VueApp = {
        data() {
            return {
                title: '新闻',
                content: '新闻内容<a>jiu wei</a>',
            }
        }
    }
    Vue.createApp(VueApp).mount('#app')
</script>

 

        1、基础指令

• v-html：content是data数据源中的属性值(相当于一个变量)，在双大括号后运行，底层相当于innerHTML，能够解析标签。
• v-text：content相当于一个变量，在双大括号后运行，底层相当于innerText。
• v-pre：能够将{{title}}原封不动的显示，不解析。
• v-cloak：在vue框架运行后，这个属性就去掉了。

<div id="app">
    <p v-html="content">{{title}}</p>
    <!-- p.innerText = '新闻'  p.innerHTML = '新闻内容<a>jiu wei</a>' -->
    <p v-text="content"></p>
    <p v-pre>{{title}}是vue的一种插值语法,v-pre会静默</p>
    <!-- <input type="text" v-bind:value="value"> -->
    <input type="text" :value="value">
    <!-- 将obj对象中的内容全部作为标签的属性 -->
    <a v-bind="obj"></a>

    <button v-on:click="fn">btn1</button>
    <!-- 阻止冒泡 -->
    <button @click.stop="fn">btn2</button>
    <!-- 只能执行一次，后续没有用 -->
    <button @click.once="fn">btn3</button>
    <br>
    <img :src="image" @click="change" alt="">
</div>
<script>
    const VueApp = {
        data() {
            return {
                w:'100px',
                h:'100px',
                title: '新闻',
                content: '新闻内容<a>jiu wei</a>',
                value: '123456',
                obj: {
                    id: 'ab',
                    href: 'www.baidu.com'
                },
                image: 'https://img1.baidu.com/it/u=3829178789,2231364962&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1696870800&t=b9ad4f4457eb6aa57fe72c8bda43dd7c'
            }
        },
        methods: {
            // fn:function(){}
            fn() { console.log('点了') },
            change() {
                this.image = 'https://img2.baidu.com/it/u=861863691,2776527252&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
            },
        }
    }
    Vue.createApp(VueApp).mount('#app')
</script>

       2、属性绑定

        v-bind：将数据绑定到HTML元素的属性上的，用法为“v-bind:属性名=‘变量名（取值）’”语法糖写法是“：”。

       3、事件绑定

      v-on:click=“函数名”，语法糖写法“@click=‘函数名’”。在函数内部this.变量名，可以修改数据源。

• @click.once：只触发一次
• @click.stop：阻止冒泡
• @click.capture：在捕获阶段触发
• @click.self：事件链会经过它，但只有点击对象是该元素才会触发。

        4、样式绑定

        有3种绑定方式：变量、对象、数组

<div id="app">
    <div :class="box"></div>            //box为变量，在数据源中取值，box1作为类名
    <div :class="{box:flag}"></div>     //flag为变量，值为true则box作为类名，false则不是
    <div :class="[box2,'b2']"></div>    //box为变量，取值box2为类名，b2作为类名

    <div :style="sty"></div>
    <div :style="{width:'100px',height:'100px',backgroundColor:'blue'}"></div>
    <div :style="[w,'backgroundColor:yellow']"></div>
</div>
<script>
    const VueApp = {
        data() {
            return {
                box:'box1',
                box2:'box2',
                flag:true,
                sty:{
                    width:'100px',
                    height:'100px',
                    backgroundColor:'red'
                },
                w:{
                    width:'100px',
                    height:'100px' 
                }
            }
        },
    }
    Vue.createApp(VueApp).mount('#app')
</script>