1. vue实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue实例介绍</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- dom元素,也叫vue模版 -->
<div id="app">
<p>{{msg}}</p>
<button type="button" @click="showInfo">点击修改</button>
</div>
<script type="text/javascript">
//创建vue实例
const app = new Vue({
el:'#app', //将vue实例与id=app的div进行绑定
data:{ //定义数据对象供dom元素(vue模版)使用
msg:'程序员战羽'
},
methods:{ //定义方法
showInfo(){
console.log('函数showInfo被调用了')
this.msg = '关注微信公众号【程序员战羽】哦' //this指向Vue实例本身
}
}
})
</script>
</body>
</html>
在vue实例中:
el:将vue实例与dom元素(vue模版)进行绑定
data:定义数据对象供dom元素(vue模版)使用
methods:定义vue实例中的方法,其方法中的this指向Vue实例本身
2. vue模版语法
模版语法:html 中包含了一些 JS 语法代码,语法分为两种,分别为插值与指令。
2.1. 插值
双大括号表达式:{{xxx}},其xxx为 变量或js 表达式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue插值语法</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 文本插值 -->
<p>姓名:{{username}}</p>
<!-- js表达式运算 -->
<p>{{number + 1}}</p>
<p>{{ok ? 'YES' : 'NO'}}</p>
<p>{{message.split('').reverse().join('')}}</p>
<p :id="'list-' + id">xxx</p>
<p>{{user.name}}</p>
</div>
<script type="text/javascript">
//创建vue实例
const app = new Vue({
el: '#app', //将vue实例与id=app的div进行绑定
data: {
username: "程序员战羽",
// 数值
number: 20,
// 布尔值
ok: true,
// 字符串
message: 'EFG',
// id 值
id: 10,
// 用户的信息对象
user: {
name: '微信公众号【程序员战羽】',
}
}
})
</script>
</body>
</html>
2.2. 常见指令
常见指令如下:
命令 | 含义 |
---|---|
v-bind | 单向数据绑定,可以省略 |
v-mode | 双向数据绑定 |
v-on | 监听事件,简写为@ |
v-text | 更新元素的 textContent |
v-html | 更新元素的 innerHTML |
v-for | 列表渲染 |
v-if | 条件渲染 |
v-show | 通过控制 display 样式来控制显示/隐藏 |
2.3. 指令介绍
v-bind
单向数据绑定,可以简写为冒号:
语法:v-bind:参数 =“xxx” 或简写为 :参数=“xxx”;
特点:数据从 data 流向dom元素(页面)。
v-model
双向数据绑定
语法:v-mode:value=“xxx” 或简写为 v-model=“xxx”;
特点:数据既能从 data 流向dom元素(页面),也能从dom元素(页面)流向 data。常用在表单元素上,如input、textarea等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind/v-model</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h4>{{msg}}</h4>
<!-- 常规写法 -->
<!-- 单向数据绑定:<input type="text" v-bind:value="msg"><br/>
双向数据绑定:<input type="text" v-model:value="msg"><br/> -->
<!-- 简写 -->
单向数据绑定:<input type="text" :value="msg"><br /><br />
双向数据绑定:<input type="text" v-model="msg"><br />
</div>
<script type="text/javascript">
//创建vue实例
const app = new Vue({
el: '#app',
data: {
msg: '程序员战羽'
}
})
</script>
</body>
</html>
Class与Style绑定
绑定样式:
-
class样式
:class=“xxx” xxx可以是字符串、对象、数组。
字符串写法 :class="normal"
对象写法 :class="{normal:false,font:true}"
数组写法:class="[‘normal’,‘font’]" -
style样式
:style="{fontSize: xxx}“其中xxx是动态值。
:style=”[a,b]"其中a、b是样式对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>样式绑定</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.basic {
width: 500px;
height: 100px;
border: 2px solid red;
}
.normal {
background-color: #9ACD32;
}
.font {
font-size: 30px;
}
.good {
background-color: gray;
}
</style>
</head>
<body>
<div id="app">
<div class="basic" v-bind:class="strClass" @click="changeStyle">1、{{name}}</div><br><br>
<div class="basic" v-bind:class="objClass">2、{{name}}</div><br><br>
<div class="basic" v-bind:class="arrClass">3、{{name}}</div><br><br>
<!-- fontSize只能写成驼峰形式,样式生效后会自动转换成font-size -->
<div class="basic" v-bind:style="{color:activeColor,fontSize:fSize}">4、{{name}}</div><br><br>
<div class="basic" v-bind:style="objStyle">5、{{name}}</div><br><br>
<div class="basic" v-bind:style="arrStyle">6、{{name}}</div><br><br>
</div>
<script type="text/javascript">
let app = new Vue({
el: '#app',
data: {
name: '微信公众号:程序员战羽',
strClass: 'normal',
objClass: {
normal: false,
font: true,
},
arrClass: ['normal','font'],
activeColor:'red',
fSize:'30px',
objStyle: {
fontSize: '30px',
color: 'gray',
},
arrStyle: [{
fontSize: '30px',
color: 'blue'
},{
}]
},
methods: {
changeStyle() {
const arr = ['good', 'font']
// 随机取一个样式
const index = Math.floor(Math.random() * 2)
console.log(index)
this.strClass = arr[index]
}
}
})
</script>
</body>
</html>
MVVM模型
- M:模型(Model) :data 中的数据
- V:视图(View) :vue模板
- VM:视图模型(ViewModel) :Vue 实例对象