vue学习day01
第一个vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue基础</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '你好世界!'
}
})
</script>
</body>
</html>
对第一个vue程序的解释和扩充
-
运行vue程序的步骤：首先，在vue官网上把开发版vue下载下来，然后插入在html里，然后在script里面新建一个vue实例。
-
其中el表示挂载点，其命中的元素及其内部的后代元素由vue管理，可以使用其他选择器，可以使用其他双标签，不能使用html和body
-
其中data是定义vue中用到的数据的，data可以写复杂类型的数据，如：数组，对象等
指令
v-text
格式
<div id="app">
<h2 v-text="message+'!'"></h2>
<h2>深圳{{message+'!'}}</h2>
</div>
var app = new Vue({
el:"app",
data:{
message:"黑马程序员"
}
})
解释
-
v-text指令是标签里面的值，不可以渲染html语言
-
可以用两个{{}}渲染message到标签内
v-html
格式
<div id="app"> <p v-html="content"></p> </div>
var app = new Vue({
el:"#app",
data:{
//content:"黑马程序员"
content:"<a href='#'>黑马程序员</a>"
}
})
解释
-
v-html设置标签的innerhtml
-
它可以渲染html语言
v-on基础
格式
<div id="app"> <input type="button" value="事件绑定" v-on:click="doIt"> <input type="button" value="事件绑定" v-on:mouseenter="doIt"> <input type="button" value="事件绑定" v-on:dbclick="doIt"> <input type="button" value="事件绑定" @dbclick="doIt">
var app = new Vue({
el:"#app",
methods:{
doIt:function(){
//逻辑
}
}
})
解释
-
v-on命令是用来绑定事件的
-
绑定的事件可以是：click、mouseenter、dbclick等等
-
它可以用@简写
v-show
格式
<div id="app"> <img src="地址" v-show="true"> <img src="地址" v-show="isShow"> <img src="地址" v-show="age>=18"> </div>
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:16
}
})
解释
-
v-show用来显示和隐藏，相当于display
-
其值可以是固定值，可以是data值，可以是表达式
v-if
格式与v-show相同
不同的是它作用的是dom元素
v-bind
格式
<div id="app">
<img v-bind="imgSrc">
<img :title="imgTitle+'!!!'">
<img :class="isActive?'active':''">
<img :class="{active:isActive}">
</div>
var app = new Vue({
el:"#app",
data:{
imgSrc:"图片地址",
imgTitle:"黑马程序员"，
isActive:false
}
})
解释
-
用来设置元素的属性（比如：src,title,class）
-
可简写为“ ：”
-
class属性可用三元表达式也可用对象形式（后者比较常用）
v-for
格式
<div id="app">
<ul>
<li v-for="(item,index) in arr" :title="item">
{{index}}{{item}}
</li>
<li v-for="(item,index) in objArr">
{{item.name}}
</li>
</ul>
</div>
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补充
格式
<div id="app"> <input type="button" @click="doIt(p1,p2)"/> <input type="text" @keyup.enter="sayHi"/> </div>
var app = new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){
},
sayHi:function(){}
}
})
解释
-
p1,p2可以传递参数
-
@keyup可以用来给键盘的键绑定事件
v-model
格式
<div id="app"> <input type="text" v-model="message"/> </div>
var app = new Vue({
el:"#app",
data:{
message:"黑马程序员"
}
})
解释
-
双向绑定，表单的值可随用户传的值改变而改变
-
非常重要
51
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
