Vue实例

实例化Vue来实现Vue应用

基本格式

var vm=new Vue({
    //
})

添加内容

data中定义属性

methods中定义了函数

括号可用来调用对象属性或函数返回值

<div id="vue_det">
    <h1>site:{{site}}</h1>
    <h1>url:{{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script>
    var vm=new Vue({
        el:'#vue_det',
        data:{
            site:"Legroft",
            url:"jinjis.cn.cn",
        },
        methods:{
            details:function(){
                return this.site+"-懒癌患者";
            }
        }
    })
</script>

效果

或者

var data={site:"Legroft",url:"jinjis.cn"}
var vm=new Vue({
    el:'#vue_det',
    data:data,
    methods:{
        details:function(){
            return this.site+"-懒癌患者";
        }
    }
})

对data中的数据或vm中属性进行修改都会影响到原始的数据：

data.site="legroft"
vm.site="legroft"
//上面都会使data的site变为"legroft"

只有当实例被创建时就已经存在于data中的属性才会是响应式的，后续添加的属性的改动不会触发视图的更新。假若已知将来来会用到某些属性，可以仅为其设置初始值。

禁止修改属性

使用Object.freeze()可以阻止修改已有的属性

<div id="app">
    <p>{{foo}}</p>
    <button v-on:click="foo='baz'">Change</button>
</div>
<script>
    var obj={
        foo:'bar'
    }
    Object.freeze(obj)
    new Vue({
        el:'#app',
        data:obj
    })
</script>

使用默认属性

Vue提供了默认的属性及方法，它们都以 $ 为前缀

Vue模板语法

插值

文本

<h1>site:{{site}}</h1>

使用{{}}进行文本插值

v-once可以进行一次性插值，对属性数据的改变不会影响该处的内容

<h1 v-once>site:{{site}}</h1>

html

<div id="vue_det">
    <div v-html="message"></div>
</div>

var data={site:"Legroft",url:"jinjis.cn"}
var vm=new Vue({
    el:'#vue_det',
    data:{data,message:'<h1>LEGROFT</h1>'},
})

属性

<style>
    .black{
        background: #000000;
        color: #ffffff;
    }
</style>
<div id="change_color">
    <label for="r1">change color
        <input type="checkbox" v-model="use" id="r1">
    </label>
    <div v-bind:class="{'black':use}">test</div>
</div>
<script>
    new Vue({
        el:'#change_color',
        data:{
            use:false
        }
    })
</script>

指令

带有v-的属性

<div id="test1">
    <template v-if="seen">
        <p>--Legroft--</p>
    </template>
</div>
<script>
    new Vue({
        el:'#test1',
        data:{
            seen:true
        }
    })
</script>

参数

某些指令可以接收参数在指令后以冒号表示。

<div id="test1">
    <template v-if="seen">
        <p>--Legroft--</p>
        <a v-bind:href="url">url</a>
    </template>
</div>
<script>
    new Vue({
        el:'#test1',
        data:{
            seen:true,
            url:"https://jinjis.cn"
        }
    })
</script>

缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a :href="url">...</a>
<a @click="doSomething">...</a>