1.基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 第一步 引入 vue.js -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 第三步 -->
<div id="app">
<!-- 在这个元素里面 那么vue 的语法 就能生效 实现 vue 语法生效的范围 -->
<!-- {
{}} 名字 插值表达式 -->
<h1> {
{msg}}</h1>
<h2> {
{num}}</h2>
</div>
{
{msg}}
<!-- 第二步 实例化 Vue 构造函数-->
<script>
new Vue({
el:'#app',// 让vue 的虚拟dom 挂载在html 的真实dom的哪个元素下去,
data:{ // 定义vue的数据结构 固定写法
msg:"hello vue 我来了",
num:100
}
})
</script>
</body>
</html>
2.基础指令
①差值表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[ v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- v-cloak 如果是用插值表达式 那么就会带上这个指令 是先添加 然后自动移除 -->
<!-- 提高用户的体验 -->
<h1 v-cloak > {
{msg}}</h1>
<hr>
<!-- <h1 > {
{msg}}</h1> -->
<!-- 插值表达式 字符串拼接 数学算法 三元表达式 但是不能写 if 函数 -->
<h2> {
{num+100}}</h2>
<h2> {
{ flag ? num : msg }}</h2>
<h2> {
{num++}}</h2>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'hello',
num:10,
flag:true
},
methods: {}
});
</script>
</body>
</html>
②v-cloak
防止页面加载时出现闪烁
<div v-cloak >{
{msg}}</div>
③v-text和v-html
v-text：v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
- 如果数据中有HTML标签会将html标签一并输出
v-html：- 用法和v-text 相似 但是他可以将HTML片段填充到标签中
-
可能有安全问题, 一般只在可信任内容上使用
v-html，永不用在用户提交的内容上 -
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
④v-pre -
显示原始信息跳过编译过程
-
跳过这个元素和它的子元素的编译过程。
-
一些静态的内容不需要编译加这个指令可以加快渲染
<span v-pre>{
{ this will not be compiled }}</span>
<!-- 显示的是{
{ this will not be compiled }} -->
<span v-pre>{
{msg}}</span>
<!-- 即使data里面定义了msg这里仍然是显示的{
{msg}} -->
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
⑥v-once
执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
⑦v-model
双向数据绑定
- 当数据发生变化的时候，视图也就发生变化
- 当视图发生变化的时候，数据也会跟着同步变化
<div id="app">
<div>{
{msg}}</div>
<div>
当输入框中内容改变的时候， 页面上的msg 会自动更新
<input type="text" v-model='msg'>
</div>
</div>
⑧v-on
绑定事件
形式如：v-on:click 缩写为 @click
<button v-on:click='handle1'>点击1</button>
<button v-on:click='handle1()'>点击1</button> //传参写法
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle1: function(event) {
console.log(event.target.innerHTML)
},
handle2: function(p, p1, event) {
console.log(p, p1)
console.log(event.target.innerHTML)
this.num++;
}
}
});
</script>
⑨分支机构
v-if 使用场景
- 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
- 2- 进行两个视图之间的切换
<div v-if="type === 'A'">
A
</div>
<!-- v-else-if紧跟在v-if或v-else-if之后 表示v-if条件不成立时执行-->
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<!-- v-else紧跟在v-if或v-else-if之后-->
<div v-else>
Not A/B/C
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
十.循环结构
v-for
- 用于循环的数组里面的值可以是对象，也可以是普通元素
<ul id="example-1">
<!-- 循环结构-遍历数组
item 是我们自己定义的一个名字 代表数组里面的每一项
items对应的是 data中的数组-->
<li v-for="item in items">
{
{ item.message }}
</li>
</ul>
<script>
new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]，
}
})
</script>
- 不推荐同时使用
v-if和v-for - 当
v-if与v-for一起使用时，v-for具有比v-if更高的优先级。
3.案例选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li {
float: left;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 20px;
margin-right: 20px;
cursor: pointer;
list-style: none;
}
.act {
background-color: bisque;
color: blueviolet;
}
img {
display: none;
}
.xs {
display: block;
}
</style>
</head>
<script src="./vue.js"></script>
<body>
<div id="add">
<ul>
<li v-for='(item,index) in list' :class = 'index == currentIndex ? "act" : ""' @click = 'qiehuan(index)'>{
{item.title}}</li>
</ul>
<img v-for='(item,index) in list' :src="item.path" alt="" :class = 'index == currentIndex ? "xs" : ""'>
</div>
<script>
new Vue({
el:'#add',
data:{
currentIndex: 0,
list: [{
id: 1,
title: 'apple',
path: 'img/apple.png'
}, {
id: 2,
title: 'orange',
path: 'img/orange.png'
}, {
id: 3,
title: 'lemon',
path: 'img/lemon.png'
}]
},
methods:{
qiehuan(i){
this.currentIndex = i;
}
}
})
</script>
</body>
</html>
