首页 > 代码库 > 开始使用 Vuejs 2.0 ---简单总结2

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

2024-09-07 07:07:24   217人阅读

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的属性的真假，如果为真则display为block，假的话则为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-if、v-else、v-else-if,if三兄弟，条件判断，这个跟我们平时见到的if语句类似，根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

注意

  • v-else不需要表达式，但是需要跟在v-if和v-else-if后面
  • 我们在实验中直接使用了true和false在实际使用中可以使用表达式，例如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


联系
我们