vue入门基础1

最新推荐文章于 2023-06-10 23:43:15 发布

TD暴走小叮当

最新推荐文章于 2023-06-10 23:43:15 发布

阅读量349

点赞数 8

分类专栏： VUE vue模块语法文章标签： vue 模块语法 vue入门基础知识

本文链接：https://blog.csdn.net/shiningyn/article/details/99889276

版权

VUE 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

vue模块语法

2 篇文章 0 订阅

订阅专栏

本文所有代码的javascript部分都引入了vue.js，相关文件请搜索vue官网下载。

1. 模板语法

1.1 文本 — v-text

单纯解析文本,v-text与双大括号写法效果相同，推荐大括号写法，更加方便
html部分

	<div id="app">
        <!-- 单纯解析文本,两句语法效果相同，推荐大括号写法，更加方便 -->
        <div v-text=msg></div>
        {{msg}}  
    </div>

js部分

    new Vue({
        el:'#app',
        data:{ 	//初始化数据
            msg:'hello vue'
        }
    })

1.2 纯HTML — v-html

v-html vue提供的一个指令，相当于原生js中的 innerHTML 的功能,相当于jQuery中的().html() v-text vue提供的一个指令，相当于原生js中的 innerText 的功能,相当于 jQuery 中的().text() ,一般会用文本形式代替 {{ msg }},
作用：防止XSS,CSRF
用途：传递的代码中如果有HTML标签，并且需要解析的时候，比如说详情页面的详情部分，一搬后台会返回带有图文的一些HTML代码

html部分

	<div id="app">
	 <!-- 可以解析html标签 -->
        <div v-html=msg></div>
    </div>

js部分

    new Vue({
        el:'#app',
        data:{
            msg:'<h1>hello vue</h1>'
        }
    })

1.3 表达式部分

赞成使用三元（目）运算符，不赞成写其余的业务逻辑

html部分

	<div id="app">
	 <!-- //单纯解析文本 -->
       {{ msg }}---{{ msg + "!!!"}}--- {{ msg.split('').reverse().join('') }}
    </div>

js部分

    new Vue({
        el:'#app',
        data:{
            msg:'hello vue'
        }
    })

输出结果：

hello vue—hello vue!!!— euv olleh

2.事件处理

v-on指令监听DOM事件，并在触发时执行一些js代码

2.1 事件 — v-on

html部分

    <div id="app">
    <!-- v-on指令监听DOM事件，并在触发时执行一些js代码 -->
        <button v-on:click=alertMsg>vue simple event</button>  
    </div>

js部分

    new Vue({
        el:'#app',
        data:{  
            msg:'hello vue'
        },
        //vue中所有的自定义函数必须放置在改方法内部
        methods:{	
        	//如果此函数需要传参，则上方alertMsg后需要加括号，里面放置参数
        	//无需传参则可省略
            alertMsg(){  
                alert(this.msg);	//data只是作为修饰符存在，使用时直接用msg
            }
        }
    })

2.2 事件对象

html部分

    <div id="app">
    <!-- v-on指令监听DOM事件，并在触发时执行一些js代码 -->
        <button v-on:click=alertMsg>vue simple event</button>  
    </div>

js部分

    new Vue({
        el:'#app',
        data:{
            msg:'hello vue'
        },
        methods:{
            // showMsg(event){
            //     console.log(event)
            // }    如果不加括号，默认参数为事件对象
            showMsg(){
                console.log(event)
            }
        }
    })

2.3 运用事件修饰符阻止默认事件和事件冒泡

事件修饰符省去在写一行代码，直接在事件后方添加相关修饰符
css部分

  .btn{
      width: 100px;
      height: 100px;
      background: lightcyan;
  }

html部分

    <!-- 事件修饰符省去在写一行代码，直接在事件后方添加相关修饰符
         就可以达到相应的效果 -->
    <div id="app">
        <div class="btn" v-on:click.prevent=showbox>
            <button class="btn2" v-on:click.stop=showbtn>点击</button>
        </div> 
    </div>

js部分

     new Vue({
        el:'#app',
        data:{
            msg:'hello vue'
        },
        methods:{
           showbox( ){
               //event.preventDefault();//原生js阻止默认事件方法
               console.log('box');
           },
           showbtn( ){
              // event.stopPropagation();//原生js阻止冒泡事件方法
               console.log('btn');
           }

        }
    })

2.4 按键修饰符

按键修饰符，即在按下相关的按键之后再执行函数。
css部分

  .btn{
      width: 100px;
      height: 100px;
      background: lightcyan;
  }

html部分

      <div id="app">
      <!-- 按下enter才能执行相应的函数，可以省去判断，直接用按键修饰符，
      		点完按键以后才会执行函数-->
        <input type="text" v-on:keyup.enter=showUsername v-model=msg>
    </div>

js部分

    new Vue({
        el:'#app',
        data:{
            msg:'hello vue'
        },
        methods:{
           showUsername(event){
      			//原生js的写法
              // if(event.keyCode === 13){
              //  console.log(this.msg);
              // }
              console.log(this.msg);
           }

        }
    })

3.绑定属性

绑定属性必然跟标签相关

css部分

        .btn{
            width: 100px;
            height: 100px;
            background: lightcyan;
        }
        .active{
            background: lightcoral;
            color: bisque;
        }

html部分

     <div id="app">
        <button @click="aindex=0">000</button>
        <button v-on:click="aindex=1">111</button>
        <button v-on:click="aindex=2">222</button>
        <ul>
            <li :class="aindex === 0 ? 'active' : ''">000</li>
            <li v-bind:class="aindex === 1 ? 'active' : ''">111</li>
            <li v-bind:class="aindex === 2 ? 'active' : ''">222</li>
        </ul>
    </div>

js部分

    new Vue({
        el:'#app',
        data:{
            msg:'hello vue',
            aindex:0
        },
        methods:{
           showUsername(event){       
                console.log(this.msg);                          
           }
        }
    })

4.class与style绑定

4.1 class对象语法与数组语法

对象语法
css部分

    .active{
        color: #f66;
    }
    .test{
        font-size: 20px;
    }

html部分

    <div id="app">
        <!-- key值为定义好的样式的选择器
            value值为布尔类型的值 -->
        <div :class="{active:isActive}"> 
            class语法之对象语法
        </div>
   
    <button @click="aindex=0">000</button>
    <button v-on:click="aindex=1">111</button>
    <button v-on:click="aindex=2">222</button>
    <ul>
        <li :class="{ active: aindex === 0,test: aindex ===0 }">000</li>
        <li v-bind:class="{ active: aindex === 1,test: aindex ===1 }">111</li>
        <li v-bind:class="{ active: aindex === 2,test: aindex ===2  }">222</li>
    </ul>

js部分

    new Vue({
        el:'#app',
        data:{
            msg:'hello vue'
        }    
    })

数组语法
css部分

    .active{
        color: #f66;
    }
    .test{
        font-size: 20px;
    }

html部分

   <div id="app">
        <!-- 初始化数据添加键值对，key值为样式的名称，value
             值为定义好的css选择器
             html结构中使用绑定属性，属性值为[key1,key2] -->
        <div :class="[classa,classb]"> 
            class语法之对象语法
        </div>

js部分

    new Vue({
        el:'#app',
        data:{
            classa:'active',
            classb:'test'
        }
    })

4.2 style的对象语法和数组语法

对象语法
html部分

    <div id="app">
        <!-- v-bind:style的对象语法看起来像是css，实际是一个
             javascript对象，所以一些属性要按照javascript书写规范。
             css属性命名可采用驼峰式或者短横线分割 -->
        <div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">
            这是测试style对象方法
        </div>
    </div>
    <!-- <div id="app">
        <div v-bind:style="styleObject">111</div>
    </div> -->

js部分

    new Vue({
        el:'#app',
        data:{
            activeColor:'red',
            fontSize:50
        }
    })
    //直接绑定到一个样式对象上更改，这样让模板更加清晰，推荐注释掉的方法
    // new Vue({
    //     el:'#app',
    //     data:{
    //         styleObject:{
    //             color:'red',
    //             fontSize:'18px'
    //         }
    //     }
    // })

数组语法
html部分

    <div id="app">
        <!-- v-bind:style可以将多个样式对象应用到同一个元素上去 -->
        <div v-bind:style="[baseStyles,overStyles]">略略略</div>
    </div>

js部分

    new Vue({
        el:'#app',
        data:{
            //遵循js语法
            baseStyles:{
                fontSize:'30px',
                color:'red'
            },
            overStyles:{
                fontFamily:'楷体'
            }
        }
    })

5 vue的条件判断

v-if v-else-if v-else
v-show
v-if 渲染还是不渲染 ---- 运行时消耗更大
v-show 显示还是隐藏 ----- 初始渲染消耗更大
审查元素查看效果

    <!-- v-if中：div中永远销毁以前，从新创建 -->
    <div id="app">
        <!-- <div v-if="flag">如果为真我就显示</div>
        <div v-else>如果为假我就显示</div> -->
        {{count}}
        <div v-if="count <3 ">0-3</div>
        <div v-else-if="count <6">3-6</div>
        <div v-else-if="count <9 ">6-9</div>
        <div v-else>9-10</div>
        <!-- v-show中，div是显示和隐藏效果，display:none与block的区别 -->
        <div v-show="flag">如果为真我就显示</div>
        <div v-show="!flag">如果为假我就显示</div>
    </div>

js部分

    new Vue({
        el:'#app',
        data:{
            flag:true,
            count:Math.random()*10
        }
    })

v-if与v-show的区别小结
.v-if是真正的条件渲染，每次渲染总会销毁之前，从新创建
.但同时，v-if也是有惰性的，若初始渲染条件为假，则其什么也不做，一直到
条件为真时，才会开始渲染。
.相比之下，v-show不管初始条件是什么，元素总会被渲染，并且只是css进
行切换
一般来说，v-if有更高的切换开销，v-show有更高的渲染开销。
如果需要频繁切换，则使用v-show较好，若运行条件很少改变，用v-if较好

6. 循环遍历

6.1 循环遍历之数组

html部分

    <div id="app">
        <button @click="pushfn">追加一个list</button>
        <ul>
            <!-- 每次循环的项item，index为每次的索引
                  单循环 -->
            <li v-for="(item,index) of list" :key="index">
                {{ item }}
            </li>
        </ul>

        <ul>
            <!-- 双循环 -->
            <li v-for="item of arr " :key="item.id">
                {{item.title}}
                <ul>
                    <li v-for="(itm,idx) of item.data" :key='idx'>
                        {{itm}}
                    </li>
                </ul>
            </li>
        </ul>
    </div>

js部分

    new Vue({
        el:'#app',
        data:{
            list:[1,2,3,4,5],
            arr:[
                {id:'item1',title:'title1',data:['a1','a2','a3']},
                {id:'item2',title:'title2',data:['b1','b2','b3']},
                {id:'item3',title:'title3',data:['c1','c2','c3']}
            ]
        },
        methods:{
            pushfn(){
                this.list.splice(0,2);
            }
        }
    })

6.2 循环遍历之对象

html部分

    <!-- <div id="app">
      <ul> -->
          <!-- 此处的value是对象的属性值 -->
          <!-- <li v-for="value in object">
            {{value}}           
          </li>
      </ul>
    </div> -->
    <!-- 此处value表示属性值，name表示属性 -->
    <!-- <div id="app" >
        <div v-for="(value,name) in object">
                {{name}}:{{value}}
        </div>
       
    </div> -->
    <div id="app" >
            <div v-for="(value,name,index) in object">
                    {{index}}:{{name}}:{{value}}
            </div>
           
    </div>

js部分

    // new Vue({
    //     el:'#app',
    //     data:{
    //         object:{
    //             title:'how to do lists in vue',
    //             author:'yyn',
    //             piblish:'2019'
    //         }
    //     }
    // })

        // new Vue({
        //     el:'#app',
        //     data:{
        //         object:{
        //             title:'how to do lists in vue',
        //             author:'yyn',
        //             piblish:'2019'
        //         }
        //     }
        // })

        new Vue({
            el:'#app',
            data:{
                object:{
                    title:'how to do lists in vue',
                    author:'yyn',
                    piblish:'2019'
                }
            }
        })

注释部分也是案例

7. 表单输入绑定

可以用 v-model 指令在表单、及元素上创建双向数据绑定。其会依据控件类型自动选择正确的方法来更新元素。 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

上面两段话术转自vue官网，查看详情请点击
html部分

    <div id="app">
        <input type="text" placeholder="用户名" v-model.lazy.trim="username">{{username}}<br>
        <input type="password" placeholder="密码" v-model="password"><br>
        <input type="radio" value="1" v-model="sex">男
        <input type="radio" value="0" v-model="sex">女<br>
        <input type="checkbox" v-model="hobby" value="1">吃饭
        <input type="checkbox" v-model="hobby" value="2">睡觉
        <input type="checkbox" v-model="hobby" value="3">吃零食<br>
        <select v-model="city">
            <!-- 第一个是为了兼容性，Safari浏览器选不中第一个 -->
            <option disabled>请选择</option>
            <option value="1">南京</option>
            <option value="2">上海</option>
            <option value="3">北京</option>
        </select><br>
        <textarea v-model="note"></textarea><br>
        <input type="checkbox" v-model="flag">同意此协议<br>
        <input type="button" value="提交" @click="getInfo">
       
    </div>

js部分

    new Vue({
        el:'#app',
        data:{
            username:'李思思',
            password:'12345',
            sex:'1',
            hobby:['1','3'], //多选
            city:'2',
            note:'',
            flag:true   //单选，true为选中，false为不选

        },
        methods:{
            getInfo(){
                const obj={
                    username:this.username,
                    password:this.password,
                    sex:this.sex === "1" ? "男" : "女",
                    hobby:this.hobby,
                    city:this.city,
                    note:this.note,
                    flag:this.flag
                }
                if(!this.flag){
                    alert('请先勾选协议');
                    return;
                    
                }
                console.log(obj);
            }
        }
    })

8. 计算属性

任何复杂的业务逻辑，我们都应当使用计算属性（在一定情况下，计算属性由于方法）

计算属性具有依赖性，计算属性依赖 data中的初始值，只有当初始值改变的时候，计算属性才会再次计算

计算属性具有依赖性，计算属性依赖 data中的初始值，只有当初始值改变的时候，计算属性才会再次计算。

案例1.运用计算属性模拟表单的实时验证
(手机号验证不够严谨，只是简单举例，实际中请运用正则）

<!--html部分-->
    <div id="app">
        <!--  reverseMsg 后面不需要放括号，虽然reverseMsg是函数，但实际上还是属性 -->
        {{ msg }}--- {{ reverseMsg }}--- {{ reverseMsg }}--- {{ reverseMsg }}
        <!-- 简单模拟实时测试输入内容是否正确 -->
        <input type="text" v-model="tel" >{{telMsg}}
    </div>

//javascript部分
    new Vue({
        el:'#app',
        data:{
            msg:'hello',
            tel:''
        },
        computed: {  //计算属性   里面放置函数，有返回值，用法与data类似
           reverseMsg(){
               console.log('computed');  //打印一次
               return this.msg.split('').reverse().join('');
           } ,
           telMsg(){
               if(this.tel.length == ""){
                   return "不能为空"
               }else if(this.tel.length !== 11){
                    return "格式有误"
               }else{
                   return "ok"
               }
           }
        }
    })

案例2.运用方法模拟实时表单验证

<!--html部分-->
    <div id="app">
        <!-- msgRev加括号才可执行 -->
        {{msg}} --- {{ msgRev() }}--- {{ msgRev() }}
        <input type="text" v-model="tel" @input="changeon">{{ teltip}}
    </div>

//javascript部分
    new Vue({
        el: '#app',
        data: {
            msg: 'hello',
            tel: '',
            teltip: ''
        },
        methods: {   //里面放置的是方法（即函数）
            msgRev() {
                console.log('methods'); //打印两次
                return this.msg.split('').reverse().join('');
            },
            changeon() {
                if (this.tel === '') {
                    this.teltip = '不能为空'
                } else if (this.tel.length !== 11) {
                    this.teltip = '格式错误'
                } else {
                    this.teltip = 'ok'
                }
            }
        }

    })

从上述两个案例中不难看出，一般计算属性优于方法。运用计算属性，更加方便。代码结构简单清晰。

9. 侦听属性

vue提供了检测数据变化的一个属性 watch

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象
注意，不应该使用箭头函数来定义 watcher 函数
理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 vue 实例

下面的案例实现最后的输入框内容跟随前面两个输入框改变的效果
运用侦听属性实现效果

<!-- html部分-->
    <div id="app">
        <!-- 实现最后的输入框内容跟随前面两个输入框改变 -->
        <input type="text" v-model="firstname">+
        <input type="text" v-model="lastname">=
        {{ nameall }}
    </div>

//js部分
    new Vue({
        el:'#app',
        data:{
            firstname:'li',
            lastname:'si',
            nameall:'lisi'
        },
        watch:{
            // 参数为新值与旧值
            firstname(newval,oldval){
                this.nameall= newval+this.lastname;
            },
            lastname(newval,oldval){
                this.nameall=this.firstname+newval;
            }
        }
    })

运用计算属性实现效果

<!-- html部分-->
    <div id="app">
        <!-- 实现最后的输入框内容跟随前面两个输入框改变 -->
        <input type="text" v-model="firstname">+
        <input type="text" v-model="lastname">=
        {{ nameall }}
    </div>

//js部分
    new Vue({
        el:'#app',
        data:{
            firstname:'li',
            lastname:'si'
        },
        computed :{
            nameall(){
                return this.firstname+this.lastname
            }
        }
    })

TD暴走小叮当

关注

8
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
vue入门基础1

vue入门之模板语法1.文本 — v-text2.纯HTML — v-html3.表达式部分4.事件处理4.1 事件 — v-on4.2 事件对象4.3 运用事件修饰符阻止默认事件和事件冒泡4.4 按键修饰符5.绑定属性6.class与style绑定6.1 class对象语法与数组语法6.2 style的对象语法和数组语法7 vue的条件判断本文所有代码的javascript部分都引入了vue....
复制链接

扫一扫

专栏目录