Vue的介绍以及说明
Posted cody-wu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue的介绍以及说明相关的知识，希望对你有一定的参考价值。
一,循环指令代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环指令</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{ arr }}</div>
<ul>
<li>{{ arr[0] }}</li>
<li>{{ arr[1] }}</li>
<li>{{ arr[2] }}</li>
</ul>
<hr>
<!-- 循环指令:v-for='ele in 容器变量' -->
<!-- 数组的循环-->
<ul>
<li v-for="s in arr">{{ s }}</li>
</ul>
<hr>
<!-- key属性是vue的属性，表示为该标签在内存中建立缓存的依据 -->
<ul>
<li v-for="(s,i) in arr" :key="s" b="b">第{{ i }}个:{{ s }}</li>
</ul>
<!-- 对象的循环,直接拿到的是value值-->
<ul>
<li v-for="v in person">{{ v }}</li>
</ul>
<!-- 对象循环之直接拿到key-->
<ul>
<li v-for="(v,k) in person">{{ k }}</li>
</ul>
<hr>
<!-- 对象循环之，直接拿到key，value，索引-->
<ul>
<li v-for="(v,k,i) in person">{{ k }}:{{ v }}:{{ i }}</li>
</ul>
<hr>
<!-- 对象循环之，拿到数组套字典的key，value以及索引，再格式化渲染-->
<p v-for="stu in students">
<span v-for="(v,k,i) in stu">
<b>{{ k }}:{{ v }}</b>
<b v-if="i != 1"> | </b>
</span>
</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
arr: ['aaa', 'bbb', 'ccc'],
person: {
'name': 'andy',
'age': 18,
'sex': 'meal'
},
students: [
{
name: 'andy',
age: 17
},
{
name: 'tank',
age: 18
},
{
name: 'jason',
age: 17
}
]
}
})
</script>
</html>二,todolist案例简单实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist案例</title>
<script src="js/vue.js"></script>
<style>
li:hover {
cursor: pointer;
color: green;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="msg_val">
<!--绑定事件-->
<button @click="sendmsg">留言</button>
<ul>
<!--拿到数组中的元素和索引值，并绑定事件，传入索引值-->
<li v-for="(msg,index) in msgs" @click="deletemsg(index)">{{ msg }}</li>
</ul>
</div>
</body>
<script>
new Vue ({
el:'#app',
data:{
msgs:[],
msg_val:''
},
methods:{
sendmsg () {
//1)数据为空直接结束函数
if (!this.msg_val) return;
//2)数据添加到留言数组中,往尾巴添加
// this.msgs.push(this.msg_val);
//2.1）数据添加，从头部添加
this.msgs.unshift(this.msg_val);
//3)清空输入框
this.msg_val = '';
},
//拿到数组当前元素的索引值
deletemsg (index) {
//操作索引值，执行删除
this.msgs.splice(index,1)
}
}
})
</script>
</html>三,插值表达式符号修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插值表达式之符号修改</title>
</head>
<body>
<!-- 主要用途是解决模版语言冲突--->
<div id="app">
<!--失效--->
<p>{{ msg }}</p>
<!--生效--->
<p>{[ msg]}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
msg:'xx'
},
delimiters:['{[',']}']
})
</script>
</html>四,监听多个变量代码实现,以及简单案例实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听多个变量</title>
</head>
<body>
<div id="app">
<input type="text" v-model="val1">
<input type="text" v-model="val2">
<input type="text" v-model="val3">
<p> {{ val_fn }} </p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
val1: '',
val2: '',
val3: '',
},
//内部书写的是方法，管理可以监听多个变量的方法
//1)方法名可以直接作为变量名被渲染，值为方法的返回值
//2)在方法名被渲染后，就是说在页面中使用了，都会被监听
//3)用来解决一个变量值依赖多个变量值
computed: {
val_fn() {
// this.val1;
// this.val2;
// this.val3;
console.log('被触发了，老弟');
return this.val1 + this.val2 + this.val3
}
}
})
</script>
</html>
4.1监听多个变量简单案例实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例实现</title>
</head>
<body>
<div id="app">
姓：<input type="text" v-model="last_name">
名: <input type="text" v-model="first_name">
<p>姓名：{{ name }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
last_name:'',
first_name:''
},
computed:{
name () {
return this.last_name + '' + this.first_name
}
}
})
</script>
</html>五.监听单个变量，将单个变量拆分成多个变量的案例实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听单个变量</title>
</head>
<body>
<div id="app">
<p>姓名: <input type="text" v-model="name"></p>
<p>姓：<input type="text" v-model="last_name"></p>
<p>名：<input type="text" v-model="first_name"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
name:'',
last_name:'',
first_name:''
},
//watch内部书写方法， 监听绑定的属性(必须存在)的方法
//方法名就是被监听的变量名
//用来解决多个变量值依赖一个变量值
watch:{
name () {
//name 变量值改变，要完成的任何逻辑都可以书写在此方法中
let names = this.name.split(' ');
this.last_name = names[0];
this.first_name = names[1]
}
}
})
</script>
</html>六.何为组件之组件解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件介绍</title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="js/vue.js"></script>
<script>
//1. new Vue 创建的实例就是组件，一个vue实例就是一个组件，new出了的实例称为根组件
//注意：在实际开发中一个页面中只有一个根组件
//2.每个组件均有html模版，css样式，js逻辑组成
// html模版：template
//挂载点是必须作为虚拟DOM渲染替换点依据，挂载点可以读取，作为根组件点模版。使用根组件无需书写template
//3.组件分为根组件，全局组件，局部组件
//根组件：所有被new Vue() 产生的组件
//全局组件：不需要注册，就可以成为任何一个组件的子组件
//局部组件：必须注册，才能成为注册该局部组件的子组件
new Vue({
el: '#app',
data:{
msg:'app-msg',
c1:'blue'
},
template:`
<div :style="{color:c1}" @click="fn">{{ msg }}</div>
`,
methods:{
fn () {
alert(this.msg)
}
}
});
</script>
</html>七.局部组件代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>局部组件</title>
<style>
.box {
box-shadow: 0 3px 5px 0;
width: 240px;
height: 300px;
text-align: center;
padding:20px 0;
float: left;
margin: 5px;
}
.box img {
width: 200px;
}
</style>
</head>
<body>
<div id="app">
<!-- //3.在父组件的template模版中渲染该局部组件-->
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//创建局部组件的步骤
//1.创建局部组件
let localTag = {
template: `
<div class="box">
<img src="img/1.jpg" alt="">
<h3>一路向北</h3>
<p>周杰伦</p>
</div>
`
};
new Vue({
el: '#app',
//2.在父组件中注册该局部组件
components:{
localTag
}
})
</script>
</html>八.全局组件代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件</title>
<style>
.box {
box-shadow: 0 3px 5px 0;
width: 200px;
height: 200px;
text-align: center;
padding: 20px 0;
float: left;
margin: 5px;
}
.box img {
width: 200px;
}
.hovers:hover{
cursor:pointer;
}
</style>
</head>
<body>
<div id="app">
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//1.创建全局组件
Vue.component('global-tag',{
//在父组件的template模版中直接渲染该全局组件
template:`
<div class="box">
<img src="img/2.jpg" alt="">
<h3>不该</h3>
<p>周杰伦 <span class="hovers" @click="action">??</span>{{ num }}</p>
</div>
`,
data () {
return {
num:0
}
},
methods: {
action () {
this.num++;
}
}
});
new Vue({
el: '#app'
})
</script>
</html>九.组件之间的交互之父传子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件交互-父传子</title>
<style>
.info {
text-align: center;
width: 200px;
height: 320px;
box-shadow: 0 3px 5px 0 blueviolet;
float: left;
margin: 5px;
}
.info img {
width: 200px;
}
</style>
</head>
<body>
<div id="app">
<info v-for="info in infos" :key="info.image" :myinfo="info"></info>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let infos = [
{
image:'img/1.jpg',
title:'安静',
desc:'.....'
},
{
image: 'img/2.jpg',
title:'搁浅',
desc:'.....'
},
{
image:'img/3.jpg',
title:'发如雪',
desc:'.....'
}
];
//创建局部组件
let info = {
template:`
<div class="info">
<img :src="myinfo.image" alt="">
<p><b>{{ myinfo.title }}</b></p>
<p><b>{{ myinfo.desc }}</b></p>
</div>
`,
//在子组件实例中，通过props实例成员获得自定义属性
props:['myinfo']
};
//数据交互- 父传子 - 是通过绑定属性的方式
//1.父组件提供数据
//2.在父组件模版中，为子组件标签设置自定义属性，绑定的值是由父组件提供的
//3.在子组件实例中，通过props实例成员获得自定义属性
new Vue({
el: '#app',
//局部组件，在父组件中注册
components:{
info,
},
data:{
//for循环局部组件中的容器
infos,
}
})
</script>
</html>十.组件之间交互之子传父
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件交互-子传父</title>
<style>
.close:hover {
cursor:pointer;
color: red;
}
</style>
</head>
<body>
<div id="app">
<p>
<input type="text" v-model="userMsg">
<button @click="sendMsg">留言</button>
</p>
<ul>
<msg-li @remove_msg="removeAction" v-for="(msg,index) in msgs" :msg="msg" :index="index" :key="msg"></msg-li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//创建局部组件
let msgLi = {
template:`
<li>
<span class="close" @click="deleteMsg(index)">X</span>
<span>{{ msg }}</span>
</li>
`,
//自定义属性
props:['msg','index'],
methods: {
//系统的click事件
deleteMsg(index) {
this.$emit('remove_msg',index);
this.$emit('myclick')
}
}
};
//组件交互-子传父
//1.数据由子组件提供
//2.子组件内部通过触发系统事件。发送一个自定义事件，将数据携带出来
//3.父组件为子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数
new Vue({
el: '#app',
data:{
msgs:[],
userMsg:''
},
methods: {
sendMsg () {
if (this.userMsg) {
//增加留言
this.msgs.unshift(this.userMsg);
//增加后的留言去除在输入框中
this.userMsg = '';
}
},
removeAction(index) {
this.msgs.splice(index,1)
}
},
//注册局部组件
components:{
msgLi
}
})
</script>
</html>
以上是关于Vue的介绍以及说明的主要内容，如果未能解决你的问题，请参考以下文章