vue基础一

一、vue的编写步骤

　　

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        //1.0与2.0是有区别的，但是
        <script src="../libs/vue1026.js"></script> //1.引入的1.0的包
        <script src="../libs/vue221.js"></script> //1.引入的2.0的包 
    </head>
    <body>
        <div id="app">  //引入的包一定要确定一个范围表明这个范围的指令都是被vue来解析
            {{msg}}
        </div>
    </body>
    <script>
    //通过vue实例化一个对象，用这个对象来解析id=app中的指令
        new Vue({
            el:"#app", //表示vm对象将来操作的view的区域是app的这个div中的所有指令
            data:{
                msg:"hello world" //称为为mvvm中的model
            }
        })
    </script>
</html>

二、常用指令

　　1.插值表达式{{}}

　　　　这是数据常用的形式就是使用"Mustache"语法(双大括号)的文本插值，Mustache标签将会被替代为对应数据对象msg属性(定义在data中的值)

　　　　例如：

　　　　　　<span>{{mag}}</span>

　　　　对javascript表达式的支持

　　　　例如:

　　　　　　{{1+1}}

　　　　　　{{ok?'yes':'no'}} //只支持三元表达式不支持if判断

　　　　但是只能绑定单个表达式

　　2.v-text和v-html的指令

　　共同点:都是将一个变量渲染到制定的表达式中

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
　　<script src="../libs/vue1026.js"></script>
</head>
<body>
<div id="app">
    {{name}}
    <span v-text="name"></span>

    <span v-html="name"></span>
</div>
</body>
<script src="./libs/vue221.js"></script>
<script src="./libs/vue1026.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            name:"<span>黑马程序员</span>" 
　　} }) 

</script> 
</html>
输出结果：
<span>黑马程序员</span> 
黑马程序员

　　不同点:v-html会解析标签而v-text则不会

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../libs/vue1026.js"></script>
</head>
<body>
<div id="app">
   
    <span v-text="name"></span>
    <br />
    <span v-html="name"></span>
</div>
</body>
<script src="./libs/vue221.js"></script>
<script src="./libs/vue1026.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            name:"<h1>黑马程序员</h1>"
        }
    })
</script>
</html>
输出结果：
<h1>黑马程序员</h1> 
黑马程序员

 

posted @ 2017-07-30 14:06  前段小白  阅读(252)  评论(0)  编辑  收藏  举报