Vue入门


1.Vue入门

1.1下载Vuejs

[https://cn.vuejs.org]

1.2Vue入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{  msg  }} {{name}} {{pwd}}
        <br/>
        <span>
            {{name}}
            <h1>{{msg}}</h1>
            <h2>{{pwd}}</h2>
        </span>
    </div>
    <script src="../static/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app", //用来给vue实例定义一个范围
            data:{
                msg: "欢迎学习vue!",
                name:"sunyun",
                pwd:"11111",
            },  //给vue定义一些相关数据
        });
    </script>

 <div id="app">
        <h3>{{msg}}</h3>

        <h3>{{user.name}} {{user.msg}}</h3>

        <h3>{{age}}</h3>

        <h3>{{lists[0]}} {{lists[1]}}</h3>

        <h3>{{users[0].age}}</h3>
    </div>

    <script src="../static/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app", //用来给vue实例定义一个范围
            data:{
                msg: "欢迎学习vue!",
                user:{name:"sunyun",msg:"handsomeBoy!"},
                age:23,
                lists:["jiangxi","shangrao","yushan"],
                users:[{name:"sy",age:"20"},{naem:"hauhau",age:"21"}]
            },  //给vue定义一些相关数据
        });
    </script>

    <div id="app">
        <h3>{{msg.toUpperCase()}}</h3>
    </div>
    <script src="../static/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app", //用来给vue实例定义一个范围
            data:{
                msg: "vue",

            },  //给vue定义一些相关数据
        });
    </script>
</body>
</html>
#总结
    1.vue实例对象中的el属性: 代表Vue的作用范围  日后Vue的用作范围都可以用Vue语法
    2.Vue实例中的data属性: 用来给Vue实例绑定一些相关的数据,绑定的数据可以通过{{变量名}}在Vue作用范围内去取出来
    3.在使用{{}}取值可以书写表达式以及逻辑运算,调用相关的方法
    4.el属性可以书写任意的css选择器,在Vue开发时候推荐使用id选择器

2. v-text和v-html

2.1 v-text

#总结
1.使用v-text取值会覆盖标签中原有的数据,使用{{}}则不会覆盖
2.使用v-text可以避免在网络环境差的情况下出现插值闪烁

2.2 v-html


文章作者: 孙昀
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 孙昀 !
评论
  目录