vue基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue初识</title>
</head>
<body>
<div id="app">
<h1>{
{ message }}</h1>
</div>
<!-- 导入本地的vue -->
<script src="/VUE/vue.js"></script>
<script>
var app = new Vue({
el:"#app", // 这里挂载到id为app的Dome元素上
data:{
message:"你好, Vue."
}
})
</script>
</body>
</html>
el 挂载点
el是用来设置vue实例挂载(管理)的元素
vue会管理el选项命中的元素及其内部的后代元素
可以使用其他的选择器,但是建议使用id选择器
可以使用其他的双标签,不能使用<html>和<body>这两个标签
css选择器
data 数据对象
vue中用的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时, 遵守js的语法
常用指令
v-text
v-text指令的作用是设置标签内容(text Content)
默认写法会替换全部内容, 使用差值表达式{ {}}可以替换指定内容
<body>
<div id="app">
<h1 v-text="message"></h1>
<h1 v-text="message +'!!!!'"></h1>
<h1>{
{ message }}!!!!</h1>
<h1></h1>
</div>
<script src="/VUE/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
message:"如果有一天"
}
})
</script>
</body>
v-html
v-html指令会解析内容中有html结构的标签, 用法和v-text一样
v-text指令无论内容是什么,只会解析为文本, 解析文本使用v-text, 需要解析HTML结构使用v-html
v-on
作用: 给元素绑定事件
可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="DOIT">
<input type="button" value="v-on简写为@" @click="DOIT">
<h2 @click="Func">{
{ message }}</h2>
</div>
<!-- 导入本地的vue -->
<script src="/VUE/vue.js"></script>
<script>
var app= new Vue({
el:"#app",
data:{
message:"点击一下增加一个汉字:"
},
methods: {
DOIT:function(){
alert("我是弹窗")
},
Func:function(){
this.message +="汉字"
}
},
})
</script>
</body>
v-show
作用: 根据真假切换元素的显示状态
原理是修改元素的display, 实现显示或隐藏
指令后面的内容最终会解析为布尔值
值为true: 显示 false: 隐藏
数据改变之后. 对元素的显示状态会同步更新
<body>
<div id="app">
<!-- isShow为变量存在data里面 -->
<img v-show=isShow src="/VUE/avatar.png" alt="">
<!-- 当age>18, 就解析为true-->
<img v-show="age>18" src="/VUE/avatar.png" alt="">
<button @click="clickfun">
<span>点击显示或隐藏</span>
</button>
<button @click="addage">
点击一下age会加一:{
{age}}
</button>
</div>
<!-- 导入本地的vue -->
<script src="/VUE/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:15
},
methods: {
clickfun:function(){
this.isShow=!this.isShow
},
addage:function(){
this.age++;
}
},
})
</script>
</body>
v-if
v-if指令根据表达式的真假切换元素的显示状态, 用法和v-show一样
本质是通过dom元素来切换显示状态
表达式的值为true时, 元素存在于dom树中, 为false时,从dom树中删除
当需要频繁切换显示状态时使用v-show,反之使用v-if
因为v-show切换时消耗比较小
v-bind
作用: 为元素绑定
属性
完整写法为v-bind:属性名
可以省略v-bind简写为:属性名
<body>
<div id="app">
<!-- 全写 -->
<img v-bind:src="imgurl" alt="" v-bind:title="text" >
<!-- 简写 -->
<img :src="imgurl" alt="" :title="text">
<!-- 当要确定一个元素是否需要类名的时候使用这种对象写法比较好理解, 当isActive为True时显示类名,反之无 -->
<img :src="imgurl" alt="" :class={"类名":isActive}>
</div>
<!-- 导入本地的vue -->
<script src="/VUE/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imgurl:"./avatar.png",
text:"我是图片说明文字",
isActive:false
}
})
</script>
</body>
v-for
作用: 根据数据生成列表结构
语法为:(item index) in 数据
(值 索引 下标) in 数据
key属性为了标识生成的列表数据, 就是给这个节点一个唯一的身份
<body>
<div id="app">
<ul>
<li v-for="(it,index) in arr" ket={
{
index }}>
{
{ index+1 }}:{
{ it }}
</li>
</ul>
<h2 v-for="item in vegetables" v-bind:title="item.name">
{
{ item.name }}
</h2>
</div>
<!-- 导入本地的vue -->
<script src="/VUE/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["刘备","关羽","张飞","赵云"],
vegetables:[
{
name:"曹操"},
{
name:"诸葛亮"}
]
},
})
</script>
</body>
v-model
双向绑定数据
<body>
<script src="./vue.js"></script>
<div id="app">
<h1 v-text="message"></h1>
<!-- v-bind: 指令只能实现数据的单项绑定,从data自动同步到 view上 -->
<input type="text" :value="message">
<br>
<br>
<!-- 在Vue中, 只有 v-model 指令实现了数据的双向绑定, 其它指令都是单向的 -->
<!-- 注意: v-model只能应用在表单元素中
表单元素: input text radio checkbox textarea select -->
<input type="text" v-model="message">
</div>
<script>
var app = new Vue({
el:"#app",
data: {
message:"如果有一天"
}
})
</script>
</body>