关于Vue的学习—本地应用(一)Vue本地应用介绍 ①通过Vue实现常见的网页效果。 ②学习Vue指令，以案例巩固知识

Vue本地应用

介绍

①通过Vue实现常见的网页效果。
②学习Vue指令，以案例巩固知识。

1.v-text指令

v-text : 设置文本的标签值
基础代码：

 <div id = "app">
 		<h2 v-text="message"></h2>
        <h2 v-text="message+'!'"></h2>
    </div>

   var app = new Vue({
        el:"#app",
        data:{
            message :"Hello Vue!!!" 
        }
    })

整体案例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text指令</title>
</head>
<body>
    <div id = "app">
        <h2 v-text="message+'!'">深圳</h2>
        <h2 v-text="info+'!'">深圳</h2>
        <h2>{{message+'!'}}深圳</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message :"Hello Vue!!!",
                info:"前端与移动教研部"
            }
        })
    </script>
    
</body>
</html>

运行结果：
在这里插入图片描述

2.v-html指令

v-html ：设置成标签的innerHTML。
基础代码：

 <div id = "app">
        <p v-html="content"></p>
    </div>

 var app = new Vue({
            el:"#app",
            data:{
                //content:"Hello Vue!",
                content:"<a href='网址'>Hello Vue</a>"
            }
        })

整体案例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-html指令</title>
</head>
<body>
    <!--2.html结构-->
    <div id = "app">
        <p v-html="content"></p>
    </div>
    <!--1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        //3.创建Vue示例
        var app = new Vue({
            el:"#app",
            data:{
                //content:"Hello Vue!",
                content:"<a href='http://www.itheima.com'>程序员</a>"
            }
        })
    </script>
</body>
</html>

运行结果：
在这里插入图片描述
点击将跳转到设置好的网址。
总结：
①v-html指令的作用是：设置元素的innerHTML。
②内容中有html结构会被解析为标签。
③v-text指令无论内容是什么，只会解析文本。
④解析文本使用v-text，需要解析html结构。

3.v-on指令

v-on ：为元素绑定事件
基础代码：

<div id = "app">
        <input type="button" value="事件绑定" v-on:事件名="方法">
    </div>

 var app = new Vue({
            el:"#app",
            data:{
                food:"西兰花炒蛋"
            },
            methods:{
                doIt:function(){
                },
            }
        })

支持v-on换成@。
整体案例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on指令</title>
</head>
<body>
    <div id = "app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <h2 @click="changeFood">{{food}}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                food:"西兰花炒蛋"
            },
            methods:{
                doIt:function(){
                    alert("做IT");
                },
                changeFood:function(){
                    //console.log(this.food);
                    this.food+="很好吃"
                }
            }
        })
    </script>
</body>
</html>

运行结果：
在这里插入图片描述
总结：
①v-on指令的作用是：为元素绑定事件。
②事件名不需要写on。
③指令可以简写为@。
④绑定的方法定义在methods属性中。
⑤方法内部通过this关键字可以访问定义在data中的数据。