Vue2.0基础(一)
image
搭建项目
mkdir vue-demo
cd vue-demo
npm init -y
vue官网下载vue.js
创建相关目录
├── assets
│ ├── css
│ └── js
│ └── vue.js
├── example
├── index.html
└── package.json
cd vue-demo
live-server
创建hello-world.html
cd example
touch hello-world.html
hello-world.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>hello world</h1>
<hr>
<div id="app">{{message}}</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
message: 'hello world'
}
})
</script>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js实例</title>
</head>
<body>
<h1>vue2.0实例</h1>
<hr>
<ul>
<li><a href="./example/hello-world.html">hello world 实例</a></li>
</ul>
</body>
</html>
效果
174
v-show v-if v-else
相同点：v-if与v-show都可以动态控制dom元素显示或隐藏
不同点：v-if显示隐藏是将dom元素添加或删除，而v-show是为该元素添加css(display: none;)，dom元素还在
使用场景：v-if有更高的切换消耗，适合不大可能经常改变的情况；v-show有更高的初始渲染消耗，适合频繁切换
cd example
touch v-if.html
v-if.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if v-else v-show 实例</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-if v-else v-show 实例</h1>
<hr>
<div id="app">
<div v-if="isIf">v-if 显示</div>
<div v-else>v-if 隐藏</div>
<div v-show="isShow">v-show</div>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
isIf: true,
isShow: false
}
})
</script>
</body>
</html>
效果
175
v-for
touch v-for.html
v-for.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for 实例</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-for 实例</h1>
<hr>
<div id="app">
<ul>
<li v-for="(item, index) in sortItems" :key="index">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
list: [5, 12, 78, 4]
},
computed: {
sortItems: function() {
return this.list.sort(sortNumber)
}
}
})
function sortNumber(a, b) {
return a - b;
}
</script>
</body>
</html>
效果
176
v-text v-thml
当网络很慢或js出错时，会显示出{{xxx}}。为解决这个问题，v-text、v-html应运而生
v-text：渲染普通文本，不解析标签
v-html：解析标签并渲染文本数据
touch v-text.html
v-text.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-text v-html 实例</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-text v-html 实例</h1>
<hr>
<div id="app">
<div>{{message}}下面等效</div>
<div v-text="message"></div>
<div>少用v-html 可能引起xss攻击</div>
<div v-html="todo"></div>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
message: 'hello world',
todo: '<h2>hello world</h2>'
}
})
</script>
</body>
</html>
效果
177
v-on(@)
绑定事件
v-on.thml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>v-on绑定事件</title>
</head>
<body>
<h1>v-on 绑定事件</h1>
<hr>
<div id="app">
考试得分： {{count}}<br/>
<button v-on:click="add">加分</button>
<button v-on:click="reduce">减分</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data: {
count: 1
},
methods:{
add: function() {
this.count++;
},
reduce: function() {
this.count--;
}
}
})
</script>
</body>
</html>
效果
178
简写
<button @click="add">加分</button>
绑定其他事件
<input type="text" @keyup.enter="onEnter">
v-modal
数据双向绑定
v-model.html
<div id="app">
<p>v-model内容：{{message}}</p>
<h3>文本框</h3>
<p>v-model输入: <input type="text" v-model.number="message"></p>
</div>
js
const app = new Vue({
el: '#app',
data: {
message: 'hello world'
}
})
效果
182
修饰符
- .lazy
change事件之后进行同步数据 - .number 输入值自动转为数值类型，若值无法被
parseFloat()解析，则会返回原始的值 - .trim 自动过滤输入值的首尾空白字符
v-bind(:)
绑定数据和元素属性
元素属性
v-bind.html
<div id="app">
<img v-bind:src="imgUrl" alt="" srcset="">
</div>
js
const app = new Vue({
el: '#app',
data: {
imgUrl: 'https://gitee.com/itxing666/blog-images/raw/master/img/code.png'
}
})
绑定数据
<div :class="className">绑定className</div>
<div :class="{className: isOk}">isOk判断绑定class</div>
<div :class="isOk ? classA : classB">三元表达式判断</div>
<div :class="[classA, classB]">绑定class数组</div>
<div :text="1 + 2">运算</div>
<div :text="getText()">绑定方法</div>
<div :text="obj">绑定对象</div>
v-pre v-cloak v-once
v-pre
原样输出
html
<div v-pre>{{ message }}</div>
js
const app = new Vue({
el: '#app',
data: {
message: 'hello world'
}
})
效果
184
v-cloak
网速慢时，页面会闪现标签里插值表达式，例如{{ message }}。使用v-cloak，还没渲染完时有这个属性的的样式设为隐藏，渲染完v-cloak标签会自动消失变回显示
style
<style>
[v-cloak] {
display: none;
}
</style>
html
<div v-cloak>{{ message }}</div>
v-once
只渲染一次
html
<div v-once>第一次绑定的值：{{message}}</div>
<input type="text" v-model="message" >
效果
185
