vue基础

引入vue

<script src="<;"></script>

一个基本的vue程序

<div id="app">    {{ message }}</div><script>var app = new Vue({    el: '#app',    data: {        message: 'zhangfann!'    }});</script>

{{ messges}}

模板语法, 支持丰富的表达式

{{ msg +1 }}{{ ok? 'Yes' : 'No' }}{{ msg.split('').reverse.join('') }}

使用v-once, 则模板中参数不会被之后的变动改变

<p v-once>{{ msg }}</p>

v-html, 将数据以html方式解析:

var rawHtml="<span style="color:red">this should be red</span>"<p> 解释为普通字符 {{ rawHtml}}</p><p>解释为html代码 <span v-html="rawHtml"></span></p>

computed属性

computed计算属性, 和data一样, 不过computed是一个函数, 需要先计算再赋值

主要目的是为了解决依赖, 计算属性依赖于其他属性, 当其他属性更新时, vue会自动更新计算属性

其次目的是为了避免在模板中进行过于复杂的计算

<div id='app1'>    <p>{{ msg }}</p>    <p>{{ reversedMsg}}</p></div>vm = new Vue({    el: '#app1',    data:{ msg: 'hello'},    computed : {reversedMsg: function(){        return this.msg.reverse()     }}})

计算属性是个函数, 通常只能获取, 但是也可以通过设定set, 来进行设置,

computed: {    reversedMsg: {        get: function...        set: function...    }}

v-bind

 v-bind:title='message',

向控件属性传递数据

控件属性也可以通过"[]"动态得出

v-bind:[someVar]='msg'

someVar就是Vue controller中的data的属性值,

根据someVar的具体值, 来确定给控件哪个属性赋值

v-bind缩写

<a v-bind:href='msg'></a>等同于<a :href='msg'></a>

与vue控件交互, 绑定控件的回调函数

<div id="app1">    <p>{{message}}</p>    <button v-on:click='my_reverse'>click me!</button></div>var app1 = new Vue({    el: '#app1',    data: {message:'some message'},    method: {        my_reverse: function (){this.message=this.message.reverse()}    }})

v-on缩写,

<a v-on:click='msg'></a>等同于<a @click='msg'></a>

v-on函数带参数

<button @click='say('hi')'></button>

v-if='seen',

通过seen这个变量, 控制控件是否出现

v-else

<p v-if='condition'> test-if </p><p v-else> test-else </p>

v-else-if

<p v-if='condition1'> test-if </p><p v-else-if='conditon2'> test-else-if </p><p v-else-if='conditon3'> test-else-if </p><p v-else> test-else </p>

显示/隐藏多个控件

<template v-if='condition'>    <p>1</p>    <p>2</p>    <p>3</p></template>

v-for

<ul id='app1'>    <li v-for='todo in todos' key='todo.id'>        {{ todo.text }}    </li></ul>

v-for可以重复出现控件,

需要为v-for提供key关键字, 方面vue追踪更新控件

v-model

v-model是实现表单输入和变量的绑定, 使用起来很简单,

<div id='app1'>    <p>{{message}}</p>    <input v-model='message'></div>var app1 = new Vue({    el: '#app1',    data: {        message:'hello'    }})

多行文本, input是单行的,

<textarea v-model='message'></textarea>

Vue.component, 能创建新的控件,

Vue.component('todo-item', {    props: ['todo'],    template: '<li>{{todo.text}}</li>'})view:<div id="app7">    <ol>        <todo-item            v-for="todo in todos"            v-bind:todo='todo'            v-bind:key='todo.id'>        </todo-item>    </ol></div>controller:var app7 = new Vue({    el: '#app7',    data : {        todos: [        {id: 0, text: 'ni'},        {id:1, text: 'shi'},        {id:2, text: 'haoren'}        ]    }});

template的参数data与controller的参数一样,

但是它的data参数必须是要给函数

data: function(){    return count:0}

props, template的内部值,

声明:Vue.component('test-comp',{    props: ['title'],    template: "<p>title</p>"})赋值:<test-comp title='hello'></test-comp><test-comp v-bind:title='post.title' v-bind:key='post.id'></test-comp>

局部注册template,

var ComponentA = {};new vm = Vue({    components: {        'component-a' : ComponentA    }})

生命周期

vm = new Vue({    data: {msg:'hello'},    created : function(){        console.log('hello')    }})