vue基础
引入vue
">一个基本的vue程序
{{ message }}var app = new Vue({ el: '#app', data: { message: 'zhangfann!' }});模板语法
{{ messges}}模板语法, 支持丰富的表达式
{{ msg +1 }}{{ ok? 'Yes' : 'No' }}{{ msg.split('').reverse.join('') }}使用v-once, 则模板中参数不会被之后的变动改变
{{ msg }}
v-html, 将数据以html方式解析:
var rawHtml="this should be red" 解释为普通字符 {{ rawHtml}}
解释为html代码
computed属性
computed计算属性, 和data一样, 不过computed是一个函数, 需要先计算再赋值
主要目的是为了解决依赖, 计算属性依赖于其他属性, 当其他属性更新时, vue会自动更新计算属性
其次目的是为了避免在模板中进行过于复杂的计算
{{ msg }}
{{ reversedMsg}}
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缩写
等同于v-on
与vue控件交互, 绑定控件的回调函数
{{message}}
var app1 = new Vue({ el: '#app1', data: {message:'some message'}, method: { my_reverse: function (){this.message=this.message.reverse()} }})v-on缩写,
等同于v-on函数带参数
v-if
v-if='seen',通过seen这个变量, 控制控件是否出现
v-else
test-if
test-else
v-else-if
test-if
test-else-if
test-else-if
test-else
显示/隐藏多个控件
1
2
3
v-for
- {{ todo.text }}
v-for可以重复出现控件,
需要为v-for提供key关键字, 方面vue追踪更新控件
v-model
v-model是实现表单输入和变量的绑定, 使用起来很简单,
{{message}}
var app1 = new Vue({ el: '#app1', data: { message:'hello' }})多行文本, input是单行的,
Vue.component
Vue.component, 能创建新的控件,
Vue.component('todo-item', { props: ['todo'], template: '{{todo.text}} '})view:
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: "title
"})赋值:局部注册template,
var ComponentA = {};new vm = Vue({ components: { 'component-a' : ComponentA }})生命周期
vm = new Vue({ data: {msg:'hello'}, created : function(){ console.log('hello') }})本文来自投稿，不代表本人立场，如若转载，请注明出处：http://www.sosokankan.com/article/1789915.html