vue新技术教程：Vue基础教程
vue新技术教程：Vue基础教程主要目的是为了解决依赖 计算属性依赖于其他属性 当其他属性更新时 vue会自动更新计算属性computed计算属性 和data一样 不过computed是一个函数 需要先计算再赋值使用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>
vue基础引入vue
<script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></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计算属性 和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:title='message'
向控件属性传递数据
控件属性也可以通过"[]"动态得出
v-bind:[someVar]='msg'
someVar就是Vue controller中的data的属性值
根据someVar的具体值 来确定给控件哪个属性赋值
v-bind缩写
<a v-bind:href='msg'></a>
等同于
<a :href='msg'></a>v-on
与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
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>
<ul id='app1'>
<li v-for='todo in todos' key='todo.id'>
{{ todo.text }}
</li>
</ul>
v-for可以重复出现控件
需要为v-for提供key关键字 方面vue追踪更新控件
v-modelv-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 能创建新的控件
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')
}
})
