Vue部分小结
首先理清思路
代码展示
1、v-if以及{{}}代码展示
<body>
<div id="app" >
<h1 v-bind:class="true">1</h1>
<h1 v-if="name == 'jake'">{{name}}</h1>
<h1 v-if="age >= 25">{{age}}</h1>
</div>
</body>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
name:'jake',
age:30,
true:'red'
}
})
</script>
2、v-for代码展示
<body>
<div id="app">
<ul>
<!--<li>大话西游</li>
<li>海王</li>
<li>阿甘正传</li>
<li>山楂树之恋</li>-->
<li v-for = "item in movies">{{item}}</li>
</ul>
</div>
</body>
<script>
const app = new Vue({
el:'#app',
data: {
movies:['泰坦尼克号','三傻大战宝莱坞','海蒂和爷爷','复仇者联盟','活着']
}
})
</script>
3、v-show
<body>
<div id="app">
<input type="button" value="按钮" v-on:click="change">
<p v-show="is_show">秀儿，是你吗</p>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
is_show: false,
},
methods: {
change: function () {
this.is_show = !this.is_show;
}
}
});
</script>
4、v-on（因为v-on有很多的事件比如常用的click等点击这里了解等多）
<button v-on:click="onClick">点我</button>
5、v-bind
<body>
<div id="app">
<h1 class = "changcolor">改变颜色</h1>
<button v-bind:class="{changcolor:ischangecolor}">改变颜色</button>
</div>
</body>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
ischangecolor:false
}
})
</script>
6、v-model
<template>
<div>
<div class="line" v-for="(item,index) in dataModel">
<input type="text" v-model="dataModel[index].value1" />
<span>{{dataModel[index].value1}}</span>
<button v-bind:data-index="index" v-on:click="submitClick">提交</button>
<input type="text" v-model="dataModel[index].value2" />
<span>{{dataModel[index].value2}}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dataModel: []
}
},
created(){
// 这里是动态生成v-model,这个可以放在网络请求成功里面;
var len = 4;
for (var i = 0; i < len; i++) {
var item = {value1: ''};
this.dataModel.push(item);
}
},
methods:{
// 显示v-model里面的数据
submitClick: function(event){
var tag = event.target;
var index = tag.getAttribute('data-index');
alert(this.dataModel[index].value1);
console.log(this.dataModel)
}
}
}
</script>
语法糖v-bind 简写为“：”，v-on简写为“@”
常用属性
el：要挂载的div
data：数据
methods：方法
<style>
.changcolor{
color:red;
}
</style>
<div id="app">
<h1 v-bind:class="{changcolor:ischangcolor}">改变颜色</h1>
<button v-on:click="btnclick">变色</button>
</div>
</body>
<script>
const app = new Vue({
el:'#app',
data:{
ischangcolor:true
},
methods:{
btnclick:function(){
this.ischangcolor = !this.ischangcolor;
}
}
})
</script>
computed：
计算属性
本质为属性(get/set)
计算属性和methods对比---->计算属性有缓存
<body>
<div id="lantian">
<li v-for="v in stus">
{{v.name}}--{{v.sex}}
</li>
{{type}}
<input type="radio" v-model="type" value="girl" />女孩
<input type="radio" v-model="type" value="boy" />男孩
</div>
<script>
var app = new Vue({
el: '#lantian',
computed: {
stus() {
if(this.type == 'all') {
return this.user;
} else {
return this.user.filter((v) => {
return v.sex == this.type;
});
}
}
},
data: {
type: 'all',
user: [{
name: '小王',
sex: 'boy'
},
{
name: '小明',
sex: 'boy'
},
{
name: '小李',
sex: 'girl'
},
{
name: '小梅',
sex: 'girl'
}
]
}
});
</script>
</body>
watch:监听到并且执行
<div>
<p>FullName: {{fullName}}</p>
<p>FirstName: <input type="text" v-model="firstName"></p>
</div>
new Vue({
el: '#root',
data: {
firstName: 'Dawei',
lastName: 'Lou',
fullName: ''
},
watch: {
firstName(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
}
}
})
组件
创建组件化
Vue.extend方法
使用template注册组件
注册组件
使用component注册组件
使用
组件名(需放置在vue实例中才可使用)
全局、局部组件
component、Vue实例
<body>
<div id="app">
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
</body>
<script type="text/javascript">
//创建组件化构造器对象
const cpn = Vue.extend({
//通过template属性放置组件模块代码
template:`
<div>
<h1>我是表题</h1>
<h5>我是内容</h5>
<h5>我是内容2</h5>
</div>
`
});
//注册组件（全局组件）(参数1：使用时的组件名（标签名） 参数2：要放入的组件名)
Vue.component('my-cpn',cpn);
//使用
const app = new Vue({
el:'#app'
});
</script>
组件
组件抽离
通过script标签、通过template标签
父子通信
父传子(props),子传父($emit–事件)
父子访问
父访问子(
c
h
i
l
d
r
e
n
,
children,
children,refs)
子访问父(
p
a
r
e
n
t
,
parent,
parent,root)
<body>
<div id="app">
<my-cnp></my-cnp>
</div>
<script id="cnp" type="text/x-handlebars-template">
<div>
<h1>hello world</h1>
</div>
</script>
</body>
<script>
//用语法糖进行全局注册
Vue.component('my-cnp',{
template:'#cnp'
});
//Vue实例
const app = new Vue({
el:'#app'
});
</script>
父传子–字符数组
<body>
<div id="app">
<my-cnp :cmessage = "message" :cmovies = "movies"></my-cnp>
</div>
<template id="cnp">
<div>
{{cmessage}}
<ul>
<li v-for="m in cmovies">{{m}}</li>
</ul>
</div>
</template>
</body>
<script>
//通过全局注册的语法糖，进行注册
Vue.component('my-cnp',{
template:'#cnp',
props:['cmessage','cmovies']
});
const app = new Vue({
el:'#app',
data:{
message:'hello',
movies:['海贼王','阿甘正传','父与子']
}
});
</script>
父传子–对象
<body>
<div id="app">
<my-cnp :cmessage = "message" :cmovies = "movies"></my-cnp>
<hr />
<my-cnp :cmessage = "message" ></my-cnp>
<hr />
<my-cnp :cmovies = "movies"></my-cnp>
<hr />
<my-cnp ></my-cnp>
</div>
<template id="cnp">
<div>
{{cmessage}}
<ul>
<li v-for="m in cmovies">{{m}}</li>
</ul>
</div>
</template>
</body>
<script>
//通过全局注册的语法糖，进行注册
Vue.component('my-cnp',{
template:'#cnp',
// props:{
// cmessage:String,
// cmovies:Array
// }
props:{
cmessage:{
type:String,
default:'hahaha'
},
cmovies:{
type:Array,
default:['ha','ha']
}
}
});
const app = new Vue({
el:'#app',
data:{
message:'hello',
movies:['海贼王','阿甘正传','父与子']
}
});
</script>
子传父
<body>
<div id="app">
<my-cpn @itemclick="cpnitemclick"></my-cpn>
</div>
<template id="cpn">
<div>
<button v-for="item in types" @click="btnClick(item.id)">
{{item.name}}
</button>
</div>
</template>
</body>
<script>
Vue.component('my-cpn',{
template:'#cpn',
data(){
return{
types:[
{id:1,name:'热门'},
{id:2,name:'水果'},
{id:3,name:'蔬菜'},
]
}
},
methods:{
btnClick(item){
console.log(item);
this.$emit('itemclick',item)
}
}
})
const app = new Vue({
el:'#app',
methods:{
cpnitemclick(item){
console.log('子组件发来信息--->'+item)
}
}
})
</script>
双向绑定
<body>
<div id="app">
<h1>父组件中的值1：{{num1}}</h1>
<h1>父组件中的值2：{{num2}}</h1>
<hr />
<my-cpn :cnum1="num1" :cnum2="num2" @num1change="vuenum1change" @num2change="vuenum2change"></my-cpn>
</div>
<template id="cpn">
<div>
<h1>{{cnum1}}</h1>
<input type="text" v-model="cnum1" @input="cpnnum1change" />
<h1>{{cnum2}}</h1>
<input type="text" v-model="cnum2" @input="cpnnum2change" />
</div>
</template>
</body>
<script>
// 通过语法糖，注册全局组件
Vue.component('my-cpn', {
template: '#cpn',
props: ['cnum1', 'cnum2'],
methods: {
cpnnum1change(e) {
this.$emit('num1change', e.target.value)
},
cpnnum2change(e) {
this.$emit('num2change', e.target.value)
}
}
})
// Vue实例
const app = new Vue({
el: '#app',
data: {
num1: 1,
num2: 2
},
methods: {
vuenum1change(num) {
this.num1 = num;
},
vuenum2change(num) {
this.num2 = num;
}
}
})
</script>
插槽
简单插槽的使用
具名插槽的使用
编译作用域
编译作用域插槽
<body>
<div id="app">
<my-cpn>
<button>我是按钮</button>
</my-cpn>
<hr />
<my-cpn>
<label>我就不放按钮！！</label>
</my-cpn>
<hr />
<my-cpn>
<input type="text" value="我要放文本框！"/>
</my-cpn>
</div>
<template id="cpn">
<div>
<h1>我是组件哈哈</h1>
<h1>我还是组件哈哈</h1>
<slot></slot>
</div>
</template>
<script>
// 通过语法糖全局注册组件
Vue.component('my-cpn',{
template:'#cpn'
})
const app = new Vue({
el:'#app'
})
</script>
</body>
<body>
<div id="app">
<!-- 父组件(Vue---false)-->
<!-- 子组件(组件---true)-->
<my-cpn v-show="isshow"></my-cpn>
</div>
<template id="cpn">
<div>
<h1>我是组件</h1>
<h1>我是组件</h1>
</div>
</template>
<script>
Vue.component('my-cpn',{
template:'#cpn',
data(){
return{
isshow:true
}
}
})
const app = new Vue({
el:'#app',
data:{
isshow:false
}
})
</script>
</body>
<body>
<div id="app">
<my-cpn>
<template slot-scope="slot">
<span v-for="l in slot.data">
{{l}} --->
</span>
</template>
</my-cpn>
<hr />
<my-cpn>
<template slot-scope="slot">
<ul>
<li v-for="l in slot.data">{{l}}</li>
</ul>
</template>
</my-cpn>
</div>
<template id="cpn">
<div>
<slot :data="languages"></slot>
</div>
</template>
</body>
<script>
Vue.component('my-cpn', {
template: '#cpn',
data() {
return {
languages: ['Java', 'JavaScript', 'C++', 'Python']
}
}
})
const app = new Vue({
el: '#app'
})
</script>
感谢观看，妈妈再也不用担心我的学习啦！！
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
