Vue基础入门语法

最新推荐文章于 2024-07-14 11:16:56 发布

Cao_XinYang

最新推荐文章于 2024-07-14 11:16:56 发布

阅读量523

点赞数 12

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Cao_XinYang/article/details/139582577

版权

Vue入门基础语法

引入vue的插件

    <!--  引入vue -->
        <script src="js/vue.global.js"></script>

创建vue实例设置挂载

<body>
        <div id="app"></div>
        
        <script>
            //创建vue实例
            const app = Vue.createApp();
            
            // 将vue实例挂载到id=app上面
            // 如果不挂载 视图内容不会显示
            app.mount("#app"); 
            
        </script>
        
    </body>

data函数

声明变量所有的变量全部都放在data函数里面就可以

Data是一个函数

函数名字（）{

Return {

Name:”yyl”

}

Methods:

Vue中设置函数（方法）

methods: {
                    name() {
                        alert("你好")
                    },
                    name1:function(){
                        alert("你好1")
                    },
                    name2:()=>{
                        alert("你好2")
                    }
                    
                }

函数声明的时候一般只使用第一种

第一种声明的语法函数的名字（）{}

所有的方法写在methods中

插值表达式

类似于el表达式 ${}

{{}}

取值的时候可以使用插值表达式

支持js运算

<body>
        <div id="app">
            {{num}}<br>
            {{num+1}}<br>
            {{num==1?"你好":"你不好"}}<br>
            
        </div>
        
        <script>
            //创建vue实例
            const app = Vue.createApp({
                data(){
                    return{
                        num:1,
                        ok:true,
                    }
                }
                
            });
            // 将vue实例挂载到id=app上面
            // 如果不挂载 视图内容不会显示
            const add=app.mount("#app"); 
            
            
        </script>
        
    </body>

调用函数

<body>
        <div id="app">
            {{add()}}
        </div>
        
        <script>
            //创建vue实例
            const app = Vue.createApp({
                methods:{
                    add(){
                        console.log("aaa");
                    }
                }
                
            });
            // 将vue实例挂载到id=app上面
            // 如果不挂载 视图内容不会显示
            const add=app.mount("#app"); 
            
        </script>   </body>

指令

v-为开始的就是指令

V-html

如果内容是html代码解析的时候会把解析成html

V-text

原文展示，原来的地方有内容会覆盖

V-bind

绑定

语法:

V-bind:属性=”声明变量的名字”

简写不要v-bind 直接写：属性的名字

绑定id

:id

:class

<body>
        
        <div id="app">
            <!-- 绑定一个class
            v-bind:class="声明的变量"
             
             -->
            
            <div v-bind:class="myclass" v-bind:id="myid">niaho</div>
            <div :class="myclass" :id="myid">你好</div>
            
        </div>
        
        <script>
            //创建vue实例
            const app = Vue.createApp({
                data(){
                    return{
                        myclass:"aaa",
                        myid:"cxy"
                    }
                }
            });
            
            // 将vue实例挂载到id=app上面
            // 如果不挂载 视图内容不会显示
            app.mount("#app"); 
        </script>
        
    </body>

V-if

条件成立会显示条件不成立

不显示元素移除

好处: 保护信息

坏处:加载比较慢

v-else 只有一个或者没有

类似于if 。。。 else

v-else-if 可以存在多个

类似于 if 。。。Else if。。。Else

  <div v-if="vip==1">普通人</div>
            <div v-else-if="vip==2">比普通人厉害</div>
            <div v-else-if="vip==3">比普通人厉害两个点</div>
            <div v-else>1</div>

v-show

实现的效果和v-if 差不多

但是v-show 把元素隐藏（display:none）并没有移除

 <img v-show="age>20" src="img/屏幕截图 2024-05-22 110538.png" width="100px" height="100px"/>

v-for

语法（循环数组/集合）

v-for=”（变量,索引） in 集合（数组）”

v-for=”变量,索引 in 集合（数组）”

v-for=”变量 in 集合（数组）”

循环对象语法

v-for = ”值，键，索引 in 对象“

 <ul>
            <!-- 第一个值是数据，第二个是索引的值 -->
            <li v-for="(s,i) in students">
                {{s.name}}====={{i}}
            </li>
        </ul>
    ---------------------------------
        <ol>
            <!-- 第一个值是数据，第二个是属性名，第三个是索引 -->
            <li v-for="(key,value,i) in person">
                {{value}}===={{key}}==={{i}}
            </li>
        </ol>

Vue入门基础语法(2)

v-bind:class

同时使用很多的class样式

 .aaa{
                color: white;
            }
            .bbb{
                background-color: red;
            }
            <span :class="[myclass,myclass1]">测试</span><br />
            data() {
                    return {
                        myclass:"aaa",
                        myclass1:"bbb",
                        
                    }
                }

计算属性computed

用身份证算出年龄和性别

年龄使用我们的方法来计算的，性别是用我们的computed来计算的，但是还是推荐使用computed

                年龄：{{getAge()}}
                性别：{{sex}}<br />

            data() {
                    return {
                        idcard:"410724200508293011",
                    }
                }，
                methods: {
                    getAge(){
                        let now =  new Date().getFullYear();
                        let birthday = this.idcard.substr(6,4)
                        let age = now-birthday
                        return age;
                    }
                }computed:{
                    sex(){
                        let sex = this.idcard.substr(16,1);
                        return sex%2==0?"女":"男";
                    }
                },

watch监听

我们可以用watch进行监听，如果某个值变成某个值，监听到信息发生变化就可以进行修改

            千米：<input type="text" v-model="qianmi"/>
            米：<input type="text" v-model="mi"/><br />
            
            watch: {
                    mi(val1, val2) {
                        this.qianmi=val1/1000       
                    }
                }

v-model双向绑定

比如说在输入框的值上设置了双向绑定，value值设置为我们自己的值，输入框的值变了，我们的值也就变了

            <input type="text" v-model="model" /><br />
            {{model}}<br />
            data() {
                    return {
                        model:"你好",
                    }
                }

像复选框和多选框还有下拉框这种，就可以实现选中数据，然后把放在一个数组里，文本框实现的效果就和输入框一样了

<input type="radio" v-model="sex"value="女" />女<br />
            {{sex}}<br />
            <input type="checkbox" v-model="checkbox" value="唱" />唱
            <input type="checkbox" v-model="checkbox"value="跳" />跳
            <input type="checkbox" v-model="checkbox"value="rap" />rap<br />
            {{checkbox}}<br />
            <select v-model="chang">
                <option value="1">唱</option>
                <option value="2">跳</option>
                <option value="3">rap</option>
            </select><br/>
            {{chang}}<br/>
            <select v-model="xueli" multiple>
                <option value="1">唱</option>
                <option value="2">跳</option>
                <option value="3">rap</option>
            </select><br/>
            {{xueli}}
            data() {
                    return {
                        checkbox:["唱"],
                        chang:"",
                        xueli:[]    
                    }
                }

v-on:监听事件

v-on:监听事件 v-on:click 也可以缩写为@click,通常是设置按钮的效果和事件

            <button v-on:click="one()">你好</button>
            <!-- 只能点击一次 -->
            <button @click.once="one1()">你好一次</button>
            <!-- 只能用左键 -->
            <button @click.left="one2()">你好左边</button>
            <!-- 只能用右键 -->
            <button @click.right="one3()">你好右边</button>