版权声明：转载声明！！！ https://blog.csdn.net/weixin_43000780/article/details/89681190
1.语法
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
<div id="app">
<span>{{ name }}</span> //C.C
<span>{{ call() }}</span> //hello C.C
</div>
var app = new Vue({
el:'#app', //vue中内容直接与内存绑定
data:{
name:'C.C' //data中所有属性直接绑定到app中
},
methods:{
call:function(){
return 'hello '+this.name;
}
}
})
在控制台中调用：app.name = 'A.A'
输出：A.A
Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
data 用于定义属性。
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
2.常用指令
v-bind 动态赋予属性
/*****判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类*****/
<div>
<div v-bind:class="{'class1': use}">v-bind:class 指令</div>
</div>
new Vue({
el: '#app',
data:{
use: false
}
});
/***** 更新属性 *****/
<div id="app">
<a v-bind:href="url">点我</a>
</div>
new Vue({
el: '#app',
data: {
url: 'http://www.4399.com'
}
})
ex. v-bind可省略(保留冒号)
v-on 指定动作
<div id="app">
<button v-on="{mouseenter:mouseEnter, mouseleave:mouseLeave, click:onClick}" >喔在这</button>
</div>
var app = new Vue({
el:'#app',
data:{
url:'https://www.bilibili.com/'
},
methods:{
onClick : function(){
console.log('clicked')
},
mouseEnter:function(){
console.log('mouseEnter')
},
mouseLeave:function(){
console.log('mouseLeave')
}
}
})
ex. v-on:keyup.enter="keyEnter" 当按下回车键执行keyEnter
ex. v-on可替换为@
v-model 双向绑定
<div id="app">
<div>
<input type="text" v-model="name">
<span v-show="name">你的名字是{{ name }}</span>
</div>
<div>
<input type="text" v-model="age">
<span v-show="age">你的年龄是{{ age }}</span>
</div>
<div>
<input type="text" v-model="sex">
<span v-show="sex">你的性别是{{ sex }}</span>
</div>
</div>
var app = new Vue({
el:'#app',
data:{
name:null, //data中所有属性直接绑定到app中
age:null,
sex:"male",
}
})
ex. v-model作用域<input>/<textarea>/<select>
ex. v-model.lazy惰性更新(blur后更新)
v-model.trim省略空格
v-model.number转换成数字
v-if, v-else-if, v-else 控制流指令
<div id="app">
<div v-if="role == 'boy'">
小哥哥你好
</div>
<div v-else-if="role == 'girl'">
小姐姐你好
</div>
<div v-else>
emmm...
</div>
</div>
var app = new Vue({
el:'#app',
data:{
role:"boy"
}
})
ex. 调用：app.role = 'girl' ==> 小姐姐你好
ex. 在v-if中，判断为false，元素将从dom中删除
在v-show中，判断为false，元素仍保留在dom中
测试代码：
<div id="app">
<div v-show="role == 'boy'" id="test1">
小哥哥你好
</div>
<div v-if="role == 'girl'" id="test2">
小姐姐你好
</div>
<div v-if="role == ' '" id="test3">
emmm...
</div>
</div>
var app = new Vue({
el:'#app',
data:{
role:" "
}
})
var test1 = document.getElementById('test1');
console.log(test1) // <div id="test1" style="display: none;">小哥哥你好</div>
var test2 = document.getElementById('test2');
console.log(test2) //null
var test3 = document.getElementById('test3');
console.log(test3) //<div id="test3">emmm...</div>
v-for 动态遍历
<div id="app">
<ul>
<li v-for="drink in drinklist">{{drink.name}} ${{drink.price * drink.discount}}</li>
</ul>
</div>
var app = new Vue({
el:'#app',
data:{
drinklist:[
{
name:"milk",
price:20,
discount:.8
},
{
name:"coffee",
price:30,
discount:.5
}
]
}
})
// milk $16
coffee $15
// app.drinklist.push({name:'cola', price:'5', discount:.8})
3
milk $16
coffee $15
cola $4
3.计算属性
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。（计算属性会缓存结果，如果结果不变直接从缓存取，而方法则每次都会执行）
<div id="app">
<table border="1px">
<thead>
<td>学科</td>
<td>成绩</td>
</thead>
<tbody>
<tr>
<td>语文</td>
<td><input type="text" v-model.number="chinese"></td>
</tr>
<tr>
<td>数学</td>
<td><input type="text" v-model.number="math"></td>
</tr>
<tr>
<td>英语</td>
<td><input type="text" v-model.number="english"></td>
</tr>
<tr>
<td>总分</td>
<td>{{ sum }}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{ average}}</td>
</tr>
</tbody>
</table>
</div>
var app = new Vue({
el:'#app',
data:{
math:90,
chinese:80,
english:30
},
computed:{
sum:function(){
return (this.chinese + this.math + this.english);
},
average:function(){
return Math.round(this.sum/3)
}
}
})
4.组件
组件可以扩展 HTML 元素，封装可重用的代码。
/***** 基本配置 *****/
<div id='app'>
<alert msg="hello world!"></alert>
</div>
Vue.component('alert',{
template:'<button @click="on_click()">TTT</button>',
props:['msg'], // 传递数据的一个自定义属性
methods:{
on_click:function(){
alert(this.msg);
}
}
})
new Vue({
el:'#app'
})
/***** 父子通信 *****/
Vue.component('balanced',{
template:`
<div>
<show @show_balance="is_show_balance"></show>
<div v-if="showed">$99.99</div>
</div>
`,//监听事件并进行反应
methods:{
is_show_balance(data){
this.showed= true;
console.log('data:', data); //确认收集到数据
}
},
data:function(){ //data 是一个函数，好处是每个实例可以维护一份被返回对象的独立的拷贝，如果 data 是一个对象则会影响到其他实例
return {
showed: false,
}
}
});
Vue.component('show',{
template:'<button @click="on_click()">显示余额</button>',
methods:{
on_click(){
this.$emit('show_balance',{a:1, b:2}); //发送事件show_balance 和数据{a:1, b:2}
}
}
})
new Vue({
el:'#app'
})
/***** 同级通信 *****/
var Event = new Vue; //中间事件
Vue.component('user1',{
template:`
<div>
我说：<input @keyup="on_change" type="text" v-model="i_say">
</div>
`,
methods:{
on_change(){
Event.$emit('user1_sentence',this.i_say);
}
},
data:function(){
return {
i_say:'',
}
}
});
Vue.component("user2",{
template:`
<div>
user1说：<input type="text" v-model="o_say">
</div>
`,
data:function(){
return {
o_say:'',
}
},
mounted:function(){
me = this;
Event.$on('user1_sentence',function(data){ //监听事件，收到数据
me.o_say = data;
})
}
})
new Vue({
el:'#app'
})
// 使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
5.过滤器
<div id='app'>
<input v-model="price">
{{ price | currency('dollar')}}
</div>
Vue.filter('currency',function(val,unit){ //第一个参数来自Vue，第二个参数为传参
val = val || 0;
unit = unit || 'rmb';
return val + unit;
});
new Vue({
el:'#app',
data:{
number:10,
unit1:'',
},
methods:{
}
})
6.自定义指令
<style>
.card{
background: #f00;
width:200px;
font-size: 15px;
margin: 10px;
}
</style>
<div id='app'>
<div v-pin.bottom.right="card1.pinned" class='card'>
<button @click="card1.pinned = !card1.pinned">fixed</button>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div v-pin="card2.pinned" class='card'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur placeat laboriosam sint officia perspiciatis porro temporibus voluptates libero nobis assumenda natus ad, nemo exercitationem a, fugit consequatur reprehenderit, voluptatem quidem.</div>
<div>Consectetur at quae soluta recusandae impedit praesentium molestias iste, odio quia dolores sunt labore, atque, quidem dignissimos eligendi placeat. Perspiciatis repudiandae itaque illo perferendis consequatur. Rerum, cupiditate. Molestias, repellendus? Modi!</div>
<div>Ad cupiditate aspernatur, similique obcaecati veniam ipsam quos nostrum vel esse! Dolorum nihil enim libero saepe laboriosam, at id, voluptatum rerum architecto veritatis corrupti quia iure quae ipsam, voluptates vero.</div>
<div>Similique doloribus sequi voluptatibus sunt mollitia veritatis libero, perferendis, fuga alias amet, aut? Consequatur officia ullam praesentium dolor exercitationem dignissimos, voluptatibus, quis provident saepe quasi doloribus, fugit nobis quo non!</div>
<div>Optio corporis natus similique molestias, soluta fugit error dolorem excepturi, nesciunt consequuntur dignissimos obcaecati ratione, maxime nihil nam corrupti! Unde dolorem officiis voluptas rerum et adipisci reprehenderit autem ab. Deleniti!</div>
</div>
Vue.directive('pin',function(el,binding){
var position = binding.modifiers;
console.log(position)
if(binding.value){
el.style.position = 'fixed';
for(var key in position){
if(position[key]){
el.style[key]='10px';
}
}
}else{
el.style.position='static';
}
})
new Vue({
el:'#app',
data:{
card1:{
pinned:false,
},
card2:{
pinned:false,
}
}
})
7.混合mixins
mixins 定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
<div id='app'>
<toolip></toolip>
<hr/>
<Popup></Popup>
</div>
var base = {
methods:{
torggle:function(){
this.visible = !this.visible;
}
},
data:function(){
return{
visible:true,
}
},
}
Vue.component('toolip',{
template:
`
<div>
<span @mouseover="visible = false" @mouseleave="visible = true">bys</span>
<div v-if="visible">hello world!</div>
</div>
`,
mixins:[base],
})
Vue.component('Popup',{
template:
` <div>
<button @click="torggle" >Popup</button>
<div v-if="visible">
<span @click="torggle">X</span>
<h4>title</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odit nemo eaque minus architecto animi vero asperiores, harum nobis veniam quibusdam sunt, cumque temporibus blanditiis, libero repudiandae ab magnam corporis.
</div>
</div>
`,
mixins:[base],
})
new Vue({
el:'#app',
data:{
}
})
ex. 如果 methods 选项中有相同的函数名，则 Vue 实例优先级会较高。
7.插槽slot
<div id='app'>
<part>
<div slot="header">
yo.
</div>
<div slot="footer">
yo3.
</div>
<div slot="content">
yo2.
</div>
</part>
</div>
<template id='pl'>
<div class='panel'>
<div class="header">
<slot name="header"></slot>
</div>
<div class="content">
<slot name="content"></slot>
</div>
<div class="footer">
<slot name="footer"></slot>
</div>
</div>
</template>
Vue.component('part',{
template:'#pl',
})
new Vue({
el:'#app',
data:{
}
})
