学习vue框架day01

vue学习day01 第一个vue程序

    
    
    



  {{ message }}

对第一个vue程序的解释和扩充

运行vue程序的步骤：首先，在vue官网上把开发版vue下载下来，然后插入在html里，然后在script里面新建一个vue实例。

其中el表示挂载点，其命中的元素及其内部的后代元素由vue管理，可以使用其他选择器，可以使用其他双标签，不能使用html和body

其中data是定义vue中用到的数据的，data可以写复杂类型的数据，如：数组，对象等

指令 v-text

格式

深圳{{message+'!'}}

var app = new Vue({
el:"app",
data:{
message:"黑马程序员"
}
})

解释

v-text指令是标签里面的值，不可以渲染html语言

可以用两个{{}}渲染message到标签内

v-html

格式

var app = new Vue({
el:"#app",
data:{
//content:"黑马程序员"
content:"黑马程序员"
}
})

解释

v-html设置标签的innerhtml

它可以渲染html语言

v-on基础

格式

var app = new Vue({
el:"#app",
methods:{
doIt:function(){
//逻辑
}
}
})

解释

v-on命令是用来绑定事件的

绑定的事件可以是：click、mouseenter、dbclick等等

它可以用@简写

v-show

格式

=18">

var app = new Vue({
el:"#app",
data:{
isShow:false,
age:16
}
})

解释

v-show用来显示和隐藏，相当于display

其值可以是固定值，可以是data值，可以是表达式

v-if

格式与v-show相同

不同的是它作用的是dom元素

v-bind

格式

var app = new Vue({
el:"#app",
data:{
imgSrc:"图片地址",
imgTitle:"黑马程序员"，
isActive:false
}
})

解释

用来设置元素的属性（比如：src,title,class）

可简写为“ ：”

class属性可用三元表达式也可用对象形式（后者比较常用）

v-for

格式

{{index}}{{item}}


{{item.name}}

var app = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
objArr:[
{ name:"jack"},
{ name:"qiong"}
]
}
})

解释

v-for用来根据数据生成列表结构

item表示列表元素

index表示序列号

去item里面的值要用item.name

v-on补充

格式

var app = new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){
​
},
sayHi:function(){}
}
})

解释

p1,p2可以传递参数

@keyup可以用来给键盘的键绑定事件

v-model

格式

var app = new Vue({
el:"#app",
data:{
message:"黑马程序员"
}
})

解释

双向绑定，表单的值可随用户传的值改变而改变

非常重要