current position:Home>Vue Basics

Vue Basics

2022-09-23 06:42:16kind amumu

目录

vue介绍

vue引入

vue的声明渲染、创建实例

vuetext rendering instructions

文本渲染  v-text指令

v-html指令

vue的条件渲染指令

v-else-if 多重条件渲染

条件渲染 v-show

v-for

v-for的特殊用法

属性绑定

单击事件绑定

v-bind 缩写 

v-on 缩写 

案例-简易选项卡

el与data的两种写法 

 Vue事件响应

事件的参数

Special parameters for events

事件修饰符

vue收集表单数据

 vueSingle line and multiple text forms

vue单选框

 vue复选框

 vue表单修饰符



vue介绍

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

vue引入

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

vue的声明渲染、创建实例

<body>
    <div id="app">
        <h1>{
   {msg}}</h1>
        <input type="text" v-model="msg">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
   var vm= new Vue({
        el: "#app",   //Returns the specified template(element)
        data: {
            msg: "你好Vue!"
        },   //指定数据
    })
        //el与data都是固定写法
</script>

vm通过 el与id为 "app"The page element implements the association,通过 dataproperties to associate with data,In this way, we only need to get the data and hand it overvm即可,The entire data display process is done byvm来控制,Removed what we thought was an operation.Allows us to really focus onView上.

{ {message}}是vue的插值表达式,它将vm的data中 keymessage的数据的value显示在页面上.
{ {}}可以支持js语法,Function calls can be supported,But there must be a return result,But variables cannot be declared( let a = 2)

vuetext rendering instructions

指令 是带有 v- 前缀的特殊 attribute.指令 的属性值预期是单个 JavaScript 表达式

{ { }} 语法

<div> { {msg}}</div>

new Vue({
        el:"#app",//指定vue的模板css选择器
        data:{msg:"hello Vue!"}// 指定data数据
 })

<body>
    <div id="app">
        <h1>{
   {msg}}</h1>
        <h1>{
   {2+3}}</h1>
        <h1>{
   {msg.split("").reverse().join("")}}</h1>
        <h1>{
   {2+3>8?"大于":"小于"}}</h1>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",   //Returns the specified template(element)
        data: {
            msg: "花儿"
        },   //指定数据
    })
        //{
   {}}  文本渲染指令
        //01 渲染vue的数据
        //02  数学运算
        //03  执行js普通方法split分割、reverse翻转数组、joinConcatenate arrays as strings
        //04   三元运算符 (不能使用if forWait for a multi-line command)
</script>

文本渲染  v-text指令

<div v-text="msg"> { {msg}}</div>

相当于js中的innerText

<body>
    <div id="app">
        <h1 v-text="msg"></h1>
        <h1 v-text="2+3"></h1>
        <h1 v-text="2+3>8?'大于':'小于'"></h1>
        <h1 v-text="msg.length"></h1>
        <h1 v-text="'我爱中国,'+msg"></h1>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",   //Returns the specified template(element)
        data: {
            msg: "你笑起来真好看"
        },   //指定数据
    })
    //vm是new Vue创建的一个实例
</script>

v-html指令

为了输出真正的 HTML,你需要使用v-html

 相当于js中的innerHTML

<div v-html="raw"></div>
<div v-text="raw"></div>
<div >{ {raw}}</div>

<body>
    <div id="app">
        <h1 v-html="msg"></h1>
        <p v-html="msg"></p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",   //Returns the specified template(element)
        data: {
            msg: "你笑起来<strong>真好看</strong>"
        },   //指定数据
    })
    //vm是new Vue创建的一个实例
    // v-html会解析html文本
</script>

注:在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击 .只在可信内容上使用 v-html, 永不 用在用户提交的内容上.

vue的条件渲染指令

指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 真 值的时候被渲染.

<body>
    <div id="app">
        <h1>武林大会</h1>
        <p v-if="score>90">好徒儿,师妹.....拜托</p>
        <p v-else>面壁思过吧!</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",   //Returns the specified template(element)
        data: {
            score: 65,
        },   //指定数据
    })

</script>

v-else-if 多重条件渲染
 

<body>
		<div id="app">
			<p v-if="score>=90">优秀</p>
			<p v-else-if="score>=80">良好</p>
			<p v-else-if="score>=70">中等</p>
			<p v-else-if="score>=60">及格</p>
			<p v-else>不及格</p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data() {
					return {
						score:99
					}
				}
			}).mount("#app");
		</script>
</body>
<body>
    <div id="app">
        <h1>武林大会{
   {score}}</h1>
        <h1 v-if="score>=90">独孤九剑</h1>
        <h1 v-if="score>=80">葵花宝典</h1>
        <h1 v-if="score>=70">三分归元气</h1>
        <h1 v-if="score>=60">Junior sister will marry you</h1>
        <h1 v-else>逐出师门</h1>
        <input type="text" v-model="score">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",   //Returns the specified template(element)
        data: {
            score: 65,
        },   //指定数据
    })
</script>

条件渲染 v-show

另一个用于根据条件展示元素的选项是 v-show 指令

<div v-show="canShow">我喜欢你</div>

<body>
    <div id="app">
        <h1>v-if与v-show</h1>
        <p v-if="flag">我是if</p>
        <p v-show="flag">我是show</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",   //Returns the specified template(element)
        data: {
            flag: false,
        },   //指定数据
    })
    //v-if与v-show的区别
    // 1.Both are used to control show and hide
    //2.v-if是通过domActions are hidden,v-show通过css方式隐藏
    //3.频繁切换用v-show反之v-if
</script>

v-for

我们用 v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名.

<body>
    <div id="app">
        <h1>v-for</h1>
        <p v-for="item in list">{
   {item}}</p>
        <ul>
            <li v-for="(item,index) in list">{
   {index+1}}-{
   {item}}</li>
        </ul>
        <p v-for="item in list" v-key="item">{
   {item}}</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",   //Returns the specified template(element)
        data: {
            list: ["Vue", "React", "Angular"]
        },   //指定数据
    })

    //v-key指令 vueMore optimized when rendering lists,v-key的值必须是唯一的
    //It is not recommended to use random orindex
     item in list
    item  遍历的元素(自定义的名称)
    index 遍历的下标(键名)
    list  the data being traversed
</script>

v-for的特殊用法

<body>
    <div id="app">
        <h1>v-for</h1>
        <!-- 遍历数字 -->
        <p v-for="item in 10">{
   {item}}</p>
        <!-- 遍历对象 -->
        <p v-for="item in obj">{
   {item}}</p>
        <h3 v-for="(item,key) in obj" v-key="key">{
   {key}}-{
   {item}}</h3>
        <!-- 遍历字符串 -->
        <h1 v-for="item in str">{
   {item}}</h1>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",   //Returns the specified template(element)
        data: {
            str: "学好前端,月入w",
            obj: {
                tel: 11111111111,
                qq: 222222222,
                wx: 123123123,
                name: "zhang",
            }
        },   //指定数据
    })

</script>

属性绑定

<body>
    <div id="app">
        <h1>属性绑定</h1>
        <h1 v-bind:title="title" v-bind:id="s2">我想有个title</h1>
        <h1 :title="title" :id="s2" :key="'A'">Let's write a shorthand</h1>
        <input type="text" v-model="title">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            title: "我爱我的祖国",
            s2: "myid"
        }
    })
</script>

单击事件绑定

<body>
    <div id="app">
        <h1>事件绑定</h1>
        <button v-on:click="num++">{
   {num}}</button>
        <button @click="sum+=2">{
   {sum}}</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            num: 1,
            sum: 1,
        }
    })
</script>

v-bind 缩写 

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写 

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

案例-简易选项卡

<style>
    .block {
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }

    .active {
        color: red;
    }
</style>

<body>
    <div id="app">
        <h1>选项卡</h1>
        <!-- @click 是v-on:click的简写 -->
        <!-- :click是v-bind:class 的简写 -->
        <button @click="id=0" :class="id===0?'active':''">Vue</button>
        <button @click="id=1" :class="id===1?'active':''">React</button>
        <button @click="id=2" :class="id===2?'active':''">Angular</button>
        <div class="block" v-show="id===0">
            Vue的文章列表
        </div>
        <div class="block" v-show="id===1">
            React的文章列表
        </div>
        <div class="block" v-show="id===2">
            Angular的文章列表
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            id: 0,

        }
    })
</script>

el与data的两种写法 

 Vue事件响应

<body>
    <div id="app">
        <button @click="num++">{
   {num}}</button>
        <button @click="saynum">{
   {sum}}</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                num: 1
            }
        },
        methods: {
            saynum() {
                this.num++;
                alert(this.num)
            }
        }
    })
    //this指代new Vue创建的实例
    //vue dataTake the form returned by the function
    //vueInstance direct data isolation does not affect each other
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    #box{
        width: 300px;
        height: 300px;
        border:1px solid blue;
        margin: 10px;
    }
    .blue{
        background-color:red;
        box-shadow: 5px 5px 5px red;
    }
</style>
</head>
<body>
<div id="app">
    <button @click="seen=true">显示</button>
    <button @click="hide()">隐藏</button>
    <button  v-on:click="seen=!seen"> 切换</button>
    <button @click="isBlue=true">增加类</button>
    <button @click="delClass()">删除类</button>
    <button v-on:click="isBlue=!isBlue">切换类</button>
    <div id="box" :class="{blue:isBlue}" v-if="seen"></div>//isBlue为真这个buleclass works
</div>
<script src="./vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            seen:true,
            isBlue:true
        },
        methods:{
            hide(){
                this.seen=false;
            },
            delClass:function(){
                this.isBlue=false;
            }
        }
    });
</script>
</body>
</html>

事件的参数

<body>
    <div id="app">
        <button @click="num++">{
   {num}}</button>
        <button @click="saynum(1)">{
   {num}}</button>
        <button @click="saynum(2)">点击+2</button>
        <!-- (5)实际参数:实参 -->
        <button @click="saynum(5)">点击+5</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                num: 1
            }
        },
        methods: {
            //(n)形式上的参数:形参
            saynum(n) {
                this.num++;
                alert(this.num)
            }
        }
    })
</script>

Special parameters for events

<body>
    <div id="app">
        <!-- By default, events will be passed in without parentheses$event -->
        <!-- write parentheses $event -->
        <h1 @click="saynum($event,2)">Special parameters for events$event</h1>
        <button @click="saynum($event,3)">{
   {num}}</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                num: 1,
            }
        },
        methods: {
            //形参
            saynum(e, n) {
                //e代表事件对象
                //e.target被点击的元素,innerText文本内容
                alert(e.target.innerText)
                this.num += n;
            }
        }
    })
</script>

事件修饰符

.stop 阻止事件冒泡

.prevent 阻止默认行为

.once 只执行一次

.capture    捕获
.self        自身元素触发
.passive    滚动立即触发,不等待滚动完成(移动端性能提升)

<body>
    <div id="app">
        <h1>表白</h1>
        <div class="parent" @click="dohd">
            <!-- .once 只响应一次  .stop阻止事件冒泡 There can be multiple modifiers -->
            <!-- v-on事件绑定指令 :click事件参数 .once修饰符 -->
            <button v-on:click.once.stop="say">表白</button>
            <!-- .prevent修饰符阻止默认事件 -->
            <a href="http://www.baidu.com" @click.prevent="doit">百度</a>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        methods: {
            dohd() {
                alert("And living expenses")
            },
            doit() {
                alert("有问题找百度")
            },
            say() {
                alert("表白成功")
            },
        }
    })
</script>

vue收集表单数据

 vueSingle line and multiple text forms

<body>
    <div id="app">
        <h1>表单绑定</h1>
        <input type="text" v-model="msg">
        <p>{
   {msg}}</p>
        <textarea name="" id="" cols="" rows="" v-model="text"></textarea>
        <p style="white-space: pre-line;">{
   {text}}</p>
        <p>{
   {str}}</p>
        <input type="text" v-model="str">
        <br>
        <input type="text" :value="str" @input="str=$event.target.value">
        <!-- @input="str=$event.target.value" = v-model="str" -->
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                msg: "",
                text: "",
                str: "you dida dida me",
            }

        }
    })

</script>

vue单选框

<body>
    <div id="app">
        <h1>radio-{
   {sex}}</h1>
        性别:
        <input type="radio" name="sex" v-model="sex" value="1">男
        <input type="radio" name="sex" v-model="sex" value="2">女
        <input type="radio" name="sex" v-model="sex" value="3">保密 <br>
        <h1>select-{
   {sel}}</h1>
        <p>Zhang's diploma</p>
        <select name="" id="" v-model="sel">
            <option value="小学">小学</option>
            <option value="初中">初中</option>
            <option value="高中">高中</option>
            <option value="大学">大学</option>
        </select>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                sex: 1,
                sel: "初中"
            }

        }
    })

</script>

 vue复选框

<body>
    <div id="app">
        <h1>单个checkbox</h1>
        <input type="checkbox" v-model="select">Agree to our terms{
   {select}} <br>
        <button :disabled="!select">注册</button>
        <h1>多个checkbox</h1>
        <p>{
   {fav}}</p>
        <input type="checkbox" value="唱歌" name="fav" v-model="fav">唱歌 <br>
        <input type="checkbox" value="跳舞" name="fav" v-model="fav">跳舞 <br>
        <input type="checkbox" value="看书" name="fav" v-model="fav">看书 <br>
        <input type="checkbox" value="游泳" name="fav" v-model="fav">游泳 <br>


    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                select: true,
                fav: []
            }

        }
    })

</script>

 vue表单修饰符

.lazy
你可以添加 lazy 修饰符,从而转为在 change 事件之后进行同步
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" />


.number
如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:

<input v-model.number="age" type="text" />


.trim 过滤首尾空白
<input v-model.trim="msg" />

<body>
    <div id="app">
        <h1>表单修饰符</h1>
        <input type="text" v-model.number="num">
        <p>{
   {10+num}}</p>
        <input type="text" v-model.lazy="“str">
        <p>{
   {str}}}</p>
    </div>
</body>
<script src="./js/items.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        methods: {
            num: "1",
            src: "Happy SOEs",
        }
    })
    //.number 字符串转数字
    // .lazy The update view trigger event hasinput变为change事件

</script>

copyright notice
author[kind amumu],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/266/202209230621493457.html

Random recommended