vue基本使用和常用指令
vue基本使用
<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>
<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选择器
可以使用其他的双标签,不能使用和这两个标签
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>
<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">
<img v-show=isShow src="/VUE/avatar.png" alt="">
<img v-show="age>18" src="/VUE/avatar.png" alt="">
<button @click="clickfun">
<span>点击显示或隐藏span>
button>
<button @click="addage">
点击一下age会加一:{
{age}}
button>
div>
<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">
![]()
div>
<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>
<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>
<input type="text" :value="message">
<br>
<br>
<input type="text" v-model="message">
div>
<script>
var app = new Vue({
el:"#app",
data: {
message:"如果有一天"
}
})
script>
body>