Vue简单使用
1. 使用Vue
<!-- 将来new的Vue实例,会控制这个元素中的所有内容 --> <!-- Vue 实例所控制的这个元素区域,就是我们的V --> <div id="app"> <h1>{{msg1}}</h1> <h1>{{msg2}}</h1> </div> <!-- 1.导入Vue --> <script src="vue.js"></script> <script> // 2. 创建一个Vue的实例 // 当我们导入包之后,在浏览器的内存中,就多了一个Vue构造函数 var app = new Vue({ el: '#app', // 表示,当我们new的这个vue实例,要控制页面上的哪个区域 data:{ // data 属性中,存放的是el 中药用到的数据 msg1: 'Hello Word!', // 通过vue提供的指令,很方便的就能把数据渲染到页面上,程序员不再手动操作DOM元素了,[前端的vue之类的框架,不提倡我们去手动操作DOM元素了] msg2: '123' } }) </script>
2. v-cloak v-text v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用v-cloak能够解决插值表达式闪烁的问题 -->
<p v-cloak>{{msg}}</p>
<h4 v-text="msg">456</h4>
<!-- 默认 v-text 是没有闪烁问题 -->
<!-- v-text 会覆盖元素中原本的内容, 但是插值表达式只会替换自己的这个占位符, 不会把整个元素内容清空 -->
<div>{{msg1}}</div>
<div v-text="msg1"></div>
<div v-html="msg1">456</div>
<!-- 同v-text但是会解析html标签 -->
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 123,
msg1: '<h2>123</h2>'
}
})
</script>
</body>
</html>
3. v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind: 是vue中, 提供的用于绑定属性的指令 -->
<!-- v-binf 只能实现数据的单向绑定, 从M自动绑定到V -->
<span v-bind:title="msg">123</span><br>
<!-- v-bind: 指令可以简写为 :要绑定的属性 -->
<!-- v-bind 中可以卸荷阀的额Js表达式 -->
<span :title="msg">456</span><br>
<!-- v-bind操作class -->
<!-- 第一种使用方式,直接传递一个数组 -->
<h1 :class="['thin', 'italic', 'active']">这是一个大宝贝</h1>
<!-- 在数组中使用三元表达式 -->
<h1 :class="['thin', 'italic', flag?'active':'']">这是一个大宝贝</h1>
<!-- 在数组中使用对象来代替三元表达式, 提高代码的可读性 -->
<h1 :class="['thin', 'italic', {'active':true}]">这是一个大宝贝</h1>
<!-- 绑定对象时,对象的属性是类名,可以带引号,也可以不带引号 -->
<h1 :class="{thin: true, italic: true, active: false}">这是一个大宝贝</h1>
<!-- 属性值 是一个标识符 -->
<h1 :class="objClass">这是一个大宝贝</h1>
<!-- v-bind操作style -->
<!-- v-bind直接在元素上通过:style形式书写样式 -->
<h1 :style="{color:'red', fontSize:'40px', 'font-weight':'200', 'backgroundColor':'blue'}">这是一个大宝贝</h1>
<!-- v-bind将样式写进data中 -->
<h1 :style=hlStyleObj>这是一个大宝贝</h1>
<!-- v-bind绑定多个样式 -->
<h1 :style="[hlStyleObj, hlStyleObj1]">这是一个大宝贝</h1>
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data: {
msg: 123,
flag: false,
objClass:{thin: true, italic: true, active: false},
hlStyleObj:{color:'red', fontSize:'40px', 'font-weight':'200', 'backgroundColor':'blue'},
hlStyleObj1: {fontStyle: 'italic'}
},
methods:{}
})
</script>
</body>
</html>
4. v-on
<div id="app"> <p>{{ msg }}</p> <!-- v-on vue中提供的事件绑定机制 --> <button v-on:click="reverseMessage">点击</button> <!-- 可以使用@简写 -->
<!-- 如果在函数名后加了()则可以为函数传参 --> <button @click="go">{{ msg1 }}</button> </div> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { msg: 'Hello Word 123 456', msg1: '大大', msg: 'alert(123)' }, methods:{ // 普通方法 reverseMessage:function(){ this.msg = this.msg.split(' ').reverse().join(' ') }, // 简写方法 go(){ this.msg1 = 'adasasd' } } }) </script>
5 时间修饰符 .stop .once .prevent .self .capture
<div id="app"> <div class="inner" @click="fun1"> <!-- 冒泡效果先打印fun2在打印fun1 --> <!-- .stop可以解决冒泡效果 --> <input type="submit" @click.stop="fun2" value="12"> <!-- .prevent可以阻止默认行为 --> <a href="http://www.baidu.com" @click.stop.prevent="fun3">百度</a> </div> <!-- .capture 实现捕获触发事件的机制 --> <div class="inner" @click.capture="fun1"> <input type="submit" @click="fun2" value="12"> </div> <!-- .self 只有点击当前元素才会触发 只会阻止自己身上的冒泡行为的触发, 并不会真正阻止冒泡行为 --> <div class="inner" @click.self="fun1"> <input type="submit" @click="fun2" value="12"> </div> <!-- .once 只会触发一次 --> <div class="inner" @click.once="fun1"> <input type="submit" @click="fun2" value="12"> </div> </div> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: '#app', methods: { fun1(){ console.log('fun1') }, fun2(){ console.log('fun2') }, fun3(){ console.log('fun3') } } }) </script>
6 v-model 实现双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 使用 v-model 指令, 可以实现表单元素和Model中数据的双向绑定 -->
<!-- v-model 只能运用在表单元素中 -->
<!-- input(radio, text, address, email...) select checkbox textarea -->
姓: <input type="text" v-model='first_name'>
名: <input type="text" v-model='last_name'>
<p>{{full_name}}</p>
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
first_name: '',
last_name: ''
},
computed:{
full_name: function(){
return this.first_name + this.last_name
}
}
})
</script>
</body>
</html>
7 v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 循环一个列表 -->
<p v-for="ls in lst"> {{ls}} </p>
<!-- 循环列表第二个参数为索引 -->
<p v-for="(ls, i) in lst"> 索引:{{i}}-- 值:{{ls}} </p>
<!-- 循环一个列表套对象可以通过点的方式取值 -->
<p v-for="ls in dic"> {{ls.id}}{{ls.name}} </p>
<!-- 循环一个列表套对象第二个参数为索引 -->
<p v-for="(ls, i) in dic"> {{ls.id}}{{ls.name}} {{i}} </p>
<!-- 循环一个对象 第一个 值 第二个 key 第三个 索引 -->
<p v-for="(val, key, i) in user">{{val}} {{key}} {{i}}</p>
<!-- 循环一个数字 -->
<p v-for="count in 10"> {{count}} </p>
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
lst: [1,2,3,4,5,6,7],
dic: [
{id: 1, name: 'yy1'},
{id: 2, name: 'yy2'},
{id: 3, name: 'yy3'},
{id: 4, name: 'yy4'}
],
user: {
id: 1,
name: 'yyf',
age: 18,
gender: '男'
}
}
})
</script>
</body>
</html>
8 v-for :key的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<label for="">id:
<input type="text" v-model="id">
</label>
<label>name:
<input type="text" v-model="name">
</label>
<input type="button" value="提交" @click="go">
<!-- v-for循环时,key属性只能使用namber获取string -->
<!-- key在使用时,必须使用v-bind属性绑定的形式指定key -->
<!-- 在组件中,使用v-for循环的时候,或在一些特殊情况中,如果v-for有问题, 必须使用v-for的同时指定唯一的 字符串/数字类型 key值 -->
<p v-for="ls in lst" :key='ls.id'>
<input type="checkbox">{{ls.id}} ==> {{ls.name}}</p>
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data: {
name: '',
id: '',
lst:[
{id:1, name: '嬴政'},
{id:2, name: '张辽'},
{id:3, name: '刘备'},
{id:4, name: '曹操'},
]
},
methods:{
go(){
let foo = {id: this.id, name: this.name};
this.lst.unshift(foo)
}
}
});
</script>
</body>
</html>
9 v-if v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- v-if 的特点: 每次都会重新删除或创建元素 -->
<!-- v-show 的特点: 每次不会重新进行DOM的删除和创建操作,只能切换了元素的 display:none样式 -->
<!-- v-if 有较高的切换性能消耗-->
<!-- v-show有较高的初始渲染消耗 -->
<!-- 如果元素涉及到频繁的切换,最好不要使用v-if -->
<!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用v-if -->
<p v-show="true">123</p>
<p v-show="false">456</p>
<p v-if="true">789</p>
<p v-if="false">100</p>
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
