vue入门

时间：2019-08-25 14:07:38 阅读：67 评论：0 收藏：0 [点我收藏+]

一.到vue官网下载vue.js文件；

二.常见指令介绍

1.插值表达式

{{}}

当模型中的数据发生改变时，那么试图中的数据也对应发生改变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--第一步：引入vue.js-->
        <script src="vue.js"></script>
    </head>
    <body>
        <!--第二步：创建模板-->
        <div id="app">
            <!--插入表达式-->
            {{name}}
        </div>
    </body>
    <!--第三步：创建vue对象-->
    <script type="text/javascript">
        new Vue({
            //管理边界
            el:"#app",
            data:{
                name:"你好啊"
            }
        })
    </script>
</html>

View Code

技术图片

2.v-text

将一个变量的值渲染到指定的元素中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--第一步：引入vue.js-->
        <script src="vue.js"></script>
    </head>
    <body>
        <!--第二步：创建模板-->
        <div id="app">
            <!--v-text-->
            <h1 v-text="name"></h1>
        </div>
    </body>
    <!--第三步：创建vue对象-->
    <script type="text/javascript">
        new Vue({
            //管理边界
            el:"#app",
            data:{
                name:"你好啊"
            }
        })
    </script>
</html>

View Code

技术图片

v-text 不能识别h1标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--第一步：引入vue.js-->
        <script src="vue.js"></script>
    </head>
    <body>
        <!--第二步：创建模板-->
        <div id="app">
            <!--v-text不能识别h1标签-->
            <!--v-html-->
            <div v-text="vaule"></div>
        </div>
    </body>
    <!--第三步：创建vue对象-->
    <script type="text/javascript">
        new Vue({
            //管理边界
            el:"#app",
            data:{
                vaule:"<h1>Hello Word!!!</h1>"
            }
        })
    </script>
</html>

View Code

技术图片

3.v-html

可以真正输出html元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--第一步：引入vue.js-->
        <script src="vue.js"></script>
    </head>
    <body>
        <!--第二步：创建模板-->
        <div id="app">
            <!--v-html-->
            <div v-html="vaule"></div>
        </div>
    </body>
    <!--第三步：创建vue对象-->
    <script type="text/javascript">
        new Vue({
            //管理边界
            el:"#app",
            data:{
                vaule:"<h1>Hello Word!!!</h1>"
            }
        })
    </script>
</html>