vue的模板语法 {{ }} 和 v- 指令

1.模板语法(插值语法)

2.v-if v-else-if v-else 指令 (是否渲染)

3.v-show 指令 (是否显示)

4.v-on 指令简写(@) (绑定methods里面的事件)

绑定类名(class)和属性(style)

6.v-model (数据双向绑定)

7.v-for 遍历渲染数据

8.v-html 和 v-text 给标签添加内容

9.事件修饰符

10.按键修饰符

1.模板语法(插值语法)

插值语法里面的变量是来自于data 当data里面的数据改变页面数据自动刷新改变(因为MVVM)

里面可以写三元等表达式和变量值直接在外面拼接字符串

 <div id="app">
        <h1>{
   
   {msg}}今年{
   
   {s1}}岁了,是个{
   
   {gender==1?"小男孩":"小女孩"}}</h1>
        <h2>{
   
   {person.name}}今年{
   
   {person.age}}岁了,是个{
   
   {person.gender==1?"小男孩":"小女孩"}}</h2>
    </div>

// 实例化Vue对象
    const app = new Vue({
        el: "#app", //当前实例化vue对象的容器
        data: { //数据
            msg: "小黑",
            s1: 10,
            gender: 1,
            person: {
                name: "小白",
                age: 18,
                gender: 0,
            }
        },
    });

2.v-if v-else-if v-else 指令 (是否渲染)

切换会重新渲染用于组件切换

<div id="app">
        <!-- v-if 是否渲染元素  用与切换登录状态等不需要频繁切换的元素 频繁切换比较消耗性能-->
        <h3 v-if="flag" v-on:click="flag=!flag">点击登录</h3>
        <h3 v-else v-on:click="flag=!flag">点击退出 V10</h3>
        //只会显示下面其中一种情况
        <p v-if="type=='a'">type的值为a</p>
        <p v-else-if="type=='b'">type的值为b</p>
        <p v-else-if="type=='c'">type的值为c</p>
        以上条件都不满足就执行v-else
        <p v-else>type的值为undefined</p>
    </div>

3.v-show 指令 (是否显示)

只执行一次生命周期，不建议用于传值的组件，只有第一次生效

 <div id="app">
        <!-- v-show 改变display的block和null 用于频繁切换 -->
        <p v-show="flag" @click='flag=!flag'>点击显示</p>
        <p v-show="!flag" @click='flag=!flag'>点击隐藏</p>
    </div>

4.v-on 指令简写(@) (绑定methods和computed里面的方法)

<div id="app">
        <p v-on:click="meshow()">{
   
   {show?"隐藏":"显示"}}</p>
        <p @click="meshow()">{
   
   {show?"隐藏":"显示"}}</p>
        <img v-show="show" src="./img/1.webp" alt="" width="100%">
    </div>

const app = new Vue({
        el: "#app",
        data: {
            show: true,
        },
        methods: {
            // 这里面的this指向data 不要使用箭头函数外面找不到
            meshow() {
                this.show = !this.show
            },
        },
    })

<div id="app">
        <a v-bind:href="url">百度</a>
        <a :href="url">百度</a>
    </div>

 const app=new Vue({
        el:"#app",
        data:{
            url:"https://www.baidu.com/"
        }
    })

绑定类名(class)和属性(style)

   <div id="app">
        <button @click="show=!show">{
   
   {show?"删除样式":"添加样式"}}</button>
        <!-- 多个类使用逗号隔开 -->
        <p :class="{color:show,bc:show,bd:show}">
            你如水的眸光笼着江南的烟雨映<br>
            入我那一寸一寸消融的心<br>
            从那一刻我不再只属于自己
        </p>
        <hr>
        <!-- 多个属性用逗号隔开 -->
        <p :style="{color:'blue',fontSize:'20px'}">
            我真的知道异地很苦<br>
            可是如果不是你的话<br>
            天天陪着我也没有用
        </p>
        <!-- 使用数据的值 -->
        <p :style="{color:color,fontSize:font}">
            我真的知道异地很苦<br>
            可是如果不是你的话<br>
            天天陪着我也没有用
        </p>
        <!-- 使用数据的属性和值 想根据变量控制就使用三元 不想就直接=变量名-->
        <button @click="flag=!flag" :style="!flag?bc:'null'">{
   
   {flag?"点击收藏":"取消收藏"}}</button>
    </div>

const app = new Vue({
        el: "#app",
        data: {
            // 字符串加引号
            show: true,
            color: 'pink',
            font: '30',
            flag: true,
            bc:{
                background:'yellow'
            }
        }
    })

6.v-model (数据双向绑定)

表单值改变 data里面的数据也会发生改变

data里面的数据改变表单的值也会发生改变

双向绑定自动刷新

        <!-- 通过number把字符串类型转换为数字类型进行运算 -->
        <input type="numder" v-model.number="val1">
        <input type="numder" v-model.number="val2">
        <button @click="add()">相加</button>
        <p>表单值相加：{
   
   {val}}</p>

const app = new Vue({
        el: '#app',
        data: {
            val1: 0,
            val2: 0,
            val: 0,
        },
        computed: {
            add() {
                this.val = this.val1 + this.val2
            }
        }
    })

在绑定下拉框的时候有点不一样 想得到下拉框的选项值必须绑定在select标签上面

注意：如果绑定的变量想渲染上去做初始值下拉框的选项值的value必须是变量有的值才会显示

如果只是获取下拉框内容就要在data设置一个初始值，才显示，不会自动把第一个默认初始值

使用了v-model之后select设置没有效果

         <tr>
          <td>类型</td>
          <td>
            //获取obj.author做下拉框的默认值，下面必须要有这个默认值选项才会显示
            <select name="" id="" v-model="obj.author">
              <option value="Betty">Betty</option>
              <option value="Cynthia">Cynthia</option>
              <option value="Michelle">Michelle</option>
            </select>
          </td>
        </tr>

7.v-for 遍历渲染数据

一般都要加 :key="index" 或者 :key="item.id"

      <div id="app">
        <ul>
            <!-- 数组内容渲染  key绑定一个唯一的值 在循环渲染中提高动态更新渲染效率-->
            <!-- 如果不对DOM进行添加删除就使用index下标 要进行删除添加就绑定数据里面唯一的id值 -->
            <li v-for="item,index in arr" :key="index">
                {
   
   {index}} 名字：{
   
   {item.name}} 年龄：{
   
   {item.age}}
                性别：{
   
   {item.gender==0?"女":"男"}}
            </li>
        </ul>
        <ol>
            <!-- 属性渲染 v-for=元素,下标 in 数组 -->
            <!-- 渲染标签属性使用 v-bind 加数据里面的值-->
            <li v-for="item,index in list" :key="index">
                <a :href="item.href">{
   
   {item.name}}</a><br>
                <img :src="item.url" alt="" width="300">
            </li>
        </ol>
        <ul>
            <!-- 对象渲染 v-for=属性值,属性名 in 对象 -->
            <li v-for="val,key in obj">
                {
   
   {key}}:{
   
   {val}}
            </li>
        </ul>
    </div>

       var app = new Vue({
            el: "#app",
            data: {
                arr: [{
                        name: "小白",
                        age: 18,
                        gender: 0,
                    },
                    {
                        name: "小花",
                        age: 16,
                        gender: 0,
                    },
                    {
                        name: "小黑",
                        age: 22,
                        gender: 1,
                    },
                    {
                        name: "小明",
                        age: 19,
                        gender: 1,
                    },
                    {
                        name: "小鹿",
                        age: 18,
                        gender: 0,
                    },
                    {
                        name: "小蛇",
                        age: 28,
                        gender: 1,
                    },
                ],
                list: [{
                        name: "赵云",
                        href: "https://pvp.qq.com/",
                        url: "./img/1.jpeg"
                    },
                    {
                        name: "凯哥",
                        href: "https://pvp.qq.com/",
                        url: "./img/2.jpeg"
                    },
                    {
                        name: "扁鹊",
                        href: "https://pvp.qq.com/",
                        url: "./img/3.jpeg"
                    },
                    {
                        name: "猴子",
                        href: "https://pvp.qq.com/",
                        url: "./img/4.jpeg"
                    },
                    {
                        name: "白起",
                        href: "https://pvp.qq.com/",
                        url: "./img/5.jpeg"
                    },
                    {
                        name: "韩信",
                        href: "https://pvp.qq.com/",
                        url: "./img/6.jpeg"
                    },
                    {
                        name: "赵云",
                        href: "https://pvp.qq.com/",
                        url: "./img/7.jpeg"
                    },
                    {
                        name: "小明",
                        href: "https://pvp.qq.com/",
                        url: "./img/8.jpeg"
                    },
                ],
                obj: {
                    '姓名': '小白',
                    '性别': '女',
                    '年龄': '18'
                }
            },
        });

渲染文本内容

渲染属性

渲染对象

8.v-html 和 v-text 给标签添加内容

区别：v-html可以识别添加的字符串里面的标签

   <div id="app">
        <a href="https://www.baidu.com/">百度</a>
        <p>{
   
   {tab}}</p>
        <!-- 都是给标签添加内容 -->
        <!-- v-html可以识别标签 显示内容-->
        <p v-html="tab"></p>
        <!-- v-text不能识别标签 是什么就显示什么字符串 -->
        <p v-text="tab"></p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                tab: "<a href='https://www.baidu.com/'>百度</a>",
            }
        })
    </script>

9.事件修饰符

  <div id="app">
        <!-- 阻止冒泡 -->
        <div class="box" @click.stop="a()">
            <div class="box2" @click.stop="b()">
                <!-- 阻止默认行为和冒泡 不分先后 -->
                <a href="#" @click.stop.prevent="c()">链接</a>
            </div>
        </div>
        <!-- 数据 -->
        <p>{
   
   {num}}</p>
        <!-- 阻止数据重新编译 不能改变 -->
        <p v-once>不能改变数据 {
   
   {num}}</p>
        <!-- 阻止重复触发 只能触发一次 -->
        <button @click.once="num++">按钮+1</button>
    </div>

  const app = new Vue({
        el: "#app",
        data: {
            num: 0
        },
        methods: {
            a() {
                console.log("点击了大盒子");
            },
            b() {
                console.log("点击了小盒子");
            },
            c() {
                console.log("点击了链接");
            },
        }
    })

10.按键修饰符

按键正常情况只能在聚焦状态才可以触发

想整个页面触发就在页面挂载完成的时候绑定window进行监听判断键盘事件

可以通过keyCode (键码)和CTRL (键值) 触发 keyup(按钮抬起)和keydown(按钮按下).tab键只能通过keydown触发因为tab会改变焦点

    <div id="app">
        <input type="text" v-on:keyup.ctrl.13="submit">
        <!-- 这里使用阻止事件冒泡是因为全局设置了点击空格 会一起被触发 -->
        <input type="text" v-on:keyup.space.stop="kg">
        <!-- ctrl + 任意键触发 -->
        <input type="text" v-on:keyup.ctrl.stop="ry">
    </div>

const app = new Vue({
        el: "#app",
        data: {},
        mounted() { //在页面挂载完成的时候给window绑定键盘事件
                //全局的键盘事件 方法1
            //_this = this //这里的this指向app里面的属性和方法从data和methods等里面去找
            // document.onkeyup = function (e) {
            //         // console.log(e.keyCode);
            //         if (e.keyCode == 32) {
            //             // console.log("点击了空格");
            //             _this.kg()
            //         }
            //     },
                //全局的键盘事件 方法2
            window.addEventListener("keyup", (e) => {
                // console.log(e.keyCode);
                if (e.keyCode == 32) {
                    // console.log("点击了空格");
                    this.kg() //箭头函数指向上一层this
                }

            })
        },
        methods: {
            submit() {
                console.log("你点击了CTRL+回车");
            },
            kg() {
                console.log("你点击了空格");
            },
            ry() {
                console.log("你点击了ctrl+任意键码");
            }
        },
    })

具体的键码值: