码迷,mamicode.com
首页 > Web开发 > 详细

开始使用 Vuejs 2.0 ---简单总结2

时间:2017-03-07 12:49:53      阅读:352      评论:0      收藏:0      [点我收藏+]

标签:2.0   log   内联   括号   循环   body   处理器   语句   event   

Vuejs的常用指令

  • v-html
  • v-show
  • v-if
  • v-for
  • v-on

1 、v-html

v-html 更新元素或者变量的innerHTML,按普通html解析,和v-text的区别是在变量中的html标签会被浏览器解析,比如<br>会直接解析为换行

 

语法

 <!--直接在html标签中使用vuejs中的变量msg,语法跟v-text相同-->
 <div v-html="msg"></div>

实例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Vuejs简单示例</title>
        <!--引入开发版本vue.js,在开发版本中会有很多友好的提示-->
        <script src=‘./vue.js‘></script>
    </head>
    <body>
        <!--定义一个id为demo的div-->
        <div id="demo">

          <!--此处的msg为在vuejs中定义的变量,放在两个花括号中-->
        <div v-html="msg"></div>
        <script>
            <!--实例化vuejs-->
            new Vue({
            <!--el指定的id为css选择器-->
                el:#demo,
            <!--我们的变量统统放到data中-->
                data:{
            <!--此处声明的变量msg内容为实验-->
                    msg:第一行<br><hr>第二行
                }
            })
    </script>
    </body>
</html>

2、 v-show

v-show 根据条件解析元素display的属性的真假,如果为真则displayblock,假的话则为none在页面不显示。

语法

<!--Show和Hide需在vue中定义。-->
<span v-show="Show">你能看到我!</span>
<span v-show="Hide">你能看到我吗!</span>

实例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Vuejs简单示例</title>
        <!--引入开发版本vue.js,在开发版本中会有很多友好的提示-->
        <script src=‘./vue.js‘></script>
    </head>
    <body>
        <!--定义一个id为demo的div-->
        <div id="demo">

          <!--此处的Show和Hide为在vuejs中定义的变量,放在两个花括号中-->
         <span v-show="Show">你能看到我!</span>
        <span v-show="Hide">你能看到我吗!</span>
        <script>
            <!--实例化vuejs-->
            new Vue({
            <!--el指定的id为css选择器-->
                el:#demo,
            <!--我们的变量统统放到data中-->
                data:{
            <!--此处声明的变量msg内容为实验-->
                    Show:true,
                    Hide:false
                }
            })
    </script>
    </body>
</html>

3 、 v-if

v-ifv-elsev-else-if,if三兄弟,条件判断,这个跟我们平时见到的if语句类似,根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

注意

  • v-else不需要表达式,但是需要跟在v-ifv-else-if后面
  • 我们在实验中直接使用了truefalse在实际使用中可以使用表达式,例如v-if="1>3"

语法

//Show需在vue中定义
<span v-if="Show">你能看到我!</span>

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Vuejs简单示例</title>
    <script src=‘./vue.js‘></script>
</head>
<body>
    <div id="demo">
        <p>第一组</p>
        <p>预期显示“你能看到我!”</p>
        <span v-if="Show">你能看到我!</span>
        <span v-else>你能看到我吗!</span>
        <br>
        <p>第二组</p>
        <p>预期显示“你能看到我吗!”</p>
        <span v-if="hide">你能看到我!</span>
        <span v-else>你能看到我吗!</span>
        <br>
        <p>第三组</p>
        <p>预期显示“你真的能看到我吗!”</p>
        <span v-if="hide">你能看到我!</span>
        <span v-else-if="hide">你能看到我吗!</span>
        <span v-else>你真的能看到我吗!</span>

    </div>
</body>
</html>
<script>
    new Vue({
        el:#demo,
        data:{
            Show:true,
            hide:false
        }
    })
</script>

4  、v-for

v-for 循环遍历

语法

//items为数据,item为数据的元素,text为数据中的元素内容
<div v-for="item in items">
    {{ item.text }}
</div>

 

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js指令示例</title>
    <script src=‘./vue.js‘></script>
</head>
<body>
    <div id="demo">
        <div v-for="item in items">
          {{ item.text }}
        </div>
        <div v-for="item in items">
          {{ item.name }}
        </div>
        <div v-for="item in items">
           {{ item.text }}{{ item.name }}
        </div>

        <div v-for="item in items">
           {{ item }}
        </div>
    </div>
</body>
</html>
<script>
    new Vue({
        el:#demo,
        data:{
            items:[
                {text:hello,name:实验},
                {text:hello,name:vuejs},
                {text:hello,name:html},
                {text:hello,name:js},
            ]
        }
    })
</script>

5、 v-on

v-on 绑定事件监听器

语法

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat(‘hello‘, $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为,没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter">

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js指令示例</title>
    <script src=‘./vue.js‘></script>
</head>
<body>
    <div id="demo">
        <button v-on:click="doThis">{{msg}}</button>
        </div>
    </div>
</body>
</html>
<script>
    new Vue({
        el:#demo,
        data:{
            msg:单击按钮,
            name:vuejs
        },
        methods:{
            doThis:function(e){
                console.log(this);
                //console.log(e.target.tagName);
                console.log(e.target);
                console.log(hello+this.name+!);
            }
        }
    })
</script>

 

开始使用 Vuejs 2.0 ---简单总结2

标签:2.0   log   内联   括号   循环   body   处理器   语句   event   

原文地址:http://www.cnblogs.com/horanly/p/6513745.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!