vue的指令

我之前學了學angular 

發現angular和vue的指令有點類似

先說一下

new  Vue({

         el: "#box", // element（元素） 當前作用域

         data(){

                return { //用return返回對象

                       msg: "122"

                }

            }

        })

首先是

v-model雙向綁定數據

 

<input type="text" v-model="msg"/>   {{msg}} <!--取數據-->

 

v-for循環

 

<div id="box">
    <ul>
        <!--ng-repeat-->
        <li v-for="item in arr">
            <span>{{item.name}}</span>
            <span>{{item.age}}</span>
        </li>
    </ul>
</div>
<script type="text/javascript">
    new Vue({
        el:'#box',
        data(){
            return{
//                arr:['module','views','controlle','aaaaa']
                arr:[
                    {"name":"xiaohong1","age":12},
                    {"name":"xiaohong2","age":12},
                    {"name":"xiaohong3","age":12},
                    {"name":"xiaohong4","age":12}
                ]
            }
        }
    })
</script>

 

v-show 顯示與隱藏

<div id="box">
    <div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>
</body>
<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

v-if顯示與隱藏  （dom元素的刪除添加   個人理解）

<div id="box">
    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

v-else

<div id="box">
    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
    <div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

v-else-if

<div id="box">
    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
    <div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>
    <div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>



<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

v-bind

<div id="box">
    <input type="text" v-bind:value="msg">
    <a :href="link">點擊</a>
</div>



<script>
    new Vue({
        el: "#box",
        data(){
            return {
                msg: "12222",
                link:"1、v-model.html"
            }
        }
    })
</script>

v-on 事件

<div id="box">
    <!-- v-on -->
    <button v-on:click="say">按鈕</button>
    <!--<button @click="say">按鈕</button>-->
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {}
        },
        methods: {
            say() {
                alert(111);
            }
        }
    })
</script>

v-text讀取文本不能讀取html標簽

<div id="box">
    <div v-text="msg"></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                msg:"11111"
            }
        },
        methods: {
            say() {
                alert(111);
            }
        }
    })
</script>

v-html  能讀取html標簽

<div id="box">
    <div v-html="msg"></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                msg:"<h1>121212</h1>"
            }
        },
        methods: {
            say() {
            }
        }
    })
</script>

v-class 類名

<style>
        .red {

            background: red;
        }

        .blue {
            width: 100px;
            height: 100px;
            background: blue;
        }

    </style>


<div id="box">
    <div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>
    <!--<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>-->    <!--三元運算符方式-->
    <!--<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>-->

</div>


<script>
    new Vue({
        el: "#box",
        data(){
            return {
                isred:false
            }
        }
    })
</script>

v-style  與v-class用法大致一樣  這個我就不寫了

 

v-once  與我下邊的例子  就是  加載一次  如果用到事件中就是事件只執行一次（@click.once="show"）

<div id="box">
    <div v-once>{{msg}}</div>
</div>


<script type="text/javascript">
    new Vue({
        el:"#box",
        data(){
            return{
                msg:"qwdqwdqwd"
            }
        }
    })
</script>

v-cloak防閃爍

<div id="box">
    <div v-cloak="">歡迎--{{msg}}</div>
</div>


<script>
    new Vue({
        el:"#box",
        data(){
            return{
                msg:"111111"
            }
        }
    })
</script>

v-pre  把標簽內部的元素原位輸出

<div id="box">
    <div v-pre>歡迎--{{msg}}</div>
</div>



<script>
    new Vue({
        el:"#box",
        data(){
            return{
                msg:"111111"
            }
        }
    })
</script>

 

 

接下來就是一個總結了

vue 是什么

簡介型的javascript框架    個人開發 (劉雨溪)

    特點：mvvm       m=mvc   module 模型   v=view 視圖    c=controller  控制器
         mvvm       m=mvc   module 模型   v=view 視圖     vm (視圖與數據之間的傳遞)
         vue1 雙向數據綁定   vue2 單向數據流
         單頁面應用




v-model   數據綁定
data  返回對象用 return

v-for   循環   格式  v-for="字段名 in(of) 數組json"

v-show   顯示 隱藏     傳遞的值為布爾值  true  false  默認為false

v-if   顯示與隱藏     和v-show對比的區別 就是是否刪除dom節點   默認值為false

v-else-if  必須和v-if連用

v-else  必須和v-if連用  不能單獨使用  否則報錯   模板編譯錯誤

v-bind  動態綁定  作用： 及時對頁面的數據進行更改



v-on 綁定事件  函數必須寫在methods里面
@click  快捷方法

v-text  解析文本

v-html   解析html標簽

v-bind:class   三種綁定方法  1、對象型  '{red:isred}'  2、三目型   'isred?"red":"blue"'   3、數組型  '[{red:"isred"},{blue:"isblue"}]'

v-once  進入頁面時  只渲染一次 不在進行渲染

v-cloak  防止閃爍

v-pre  把標簽內部的元素原位輸出