cgb2109-day13
Posted cgblpx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cgb2109-day13相关的知识，希望对你有一定的参考价值。
文章目录
一,Vue的基础语法
–1,解析类型丰富的data
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue解析复杂的数据</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{name}}
<h1>解析vue对象的数据:</h1>
<h1>姓名:{{person.name}} 年龄:{{person.age}} </h1>
<h1>解析vue数组的数据:</h1>
<h2>{{hobby}} {{hobby[0]}} {{hobby[1]}} </h2>
<!-- 数组名[下标].属性名 目的是来获取每个对象中属性对应的值 -->
<h2>{{persons[0].name}} {{persons[1].age}}</h2>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
name:"jack",
//对象名:对象的多个特征
person:{
name:"rose",
age:20
},
//数组
hobby:["篮球","足球"],
//数组
persons:[
{ name:"jack" , age:20 },
{ name:"rose" , age:10 }
]
}
})
</script>
</body>
</html>
–2,data的三种写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue里data的三种写法</title>
<script src="vue.js"></script>
</head>
<body>
<div id="a">
{{msg}} {{hobby[0]}}
</div>
<script>
new Vue({
el:"#a",
//通过函数,设置返回值--vue项目中组件化的使用
// data:function(){
data(){//效果同上,是上面代码的简写形式
//必须返回js对象
return {
msg:"hello vue",
hobby:[1,2,3]
}
}
})
</script>
</body>
</html>
二,Vue的指令
–1,概述
就是Vue框架提供的一些有特殊意义的代码,都有v-的前缀
常见的指令: v-if v-for v-on …
使用方式: 在开始标签处,添加新的属性,有v-的前缀的标识
–2,v-model & v-cloak
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue指令</title>
<script src="vue.js"></script>
<style>
/* 语法: 选择器{样式1;样式2;...} */
[v-cloak]{/* 选中有指定属性的元素 */
display: none; /* 隐藏 */
}
</style>
</head>
<body>
<!-- 2.v-cloak指令:解决插值表达式的闪现问题 -->
<div class="a" v-cloak>
{{address}} {{address}} {{address}}
<!-- 1.v-model指令:双向绑定,是指V和M的数据可以实时同步
address值是指你的数据要和哪个属性进行绑定.
可以获取也可设置属性的值
-->
<input type="text" v-model="address"/>
</div>
{{address}}
<script>
new Vue({
el:".a",
data(){
return{
address:"北京"
}
}
})
</script>
</body>
</html>
–3,v-if & v-show & v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue指令</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{name}}</h1>
<!-- 3.v-text和v-html 指令 都是用来获取属性值的，
区别是:前者无法解析HTML标签只能当做一个普通文本展示
后者可以解析数据中出现的HTML标签
-->
<h1 v-text="name"></h1>
<h1 v-html="name"></h1>
<!--4.v-if指令,判断条件满足时就展示元素,不满足就不展示
了解:v-if和v-show区别?都可以判断,不满足时前者干脆不会解析元素
后者会解析这个元素但是结合css代码来隐藏style="display: none;"
-->
<div v-if="age>18">年成人</div>
<div v-show="age>18">年成人</div>
<!--5.v-if指令的复杂使用 if...else if...else语法同java-->
<div v-if="salary>20000">金领</div>
<div v-else-if="salary>10000">白领</div>
<div v-else>屌丝</div>
<!--6.v-for指令用来循环遍历,通常用来遍历数组,语法类似forin,
i是获取遍历得到的数据,in是固定语法,hobby是数组名,index是下标
-->
<div v-for="i in hobby">{{i}}</div>
<div v-for="i,index in hobby">{{i}}--{{index}}</div>
</div>
<script>
new Vue({
el:"#app",
data(){
return{
name:"<p>tony</p>",
age:10,
person:{
salary:10000
},
hobby:["吃","喝","王者","Anglelababa"]
}
}
})
</script>
</body>
</html>
–4,v-on & v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测 vue指令</title>
<script src="vue.js"></script>
</head>
<body>
<!-- 0.是HTML的元素 -->
<button onclick="alert(1)">按钮1</button>
<a href="https://www.baidu.com/">百度一下</a>
<div id="app">
<!-- 1.v-on指令:给元素绑定不同的事件,可以简写成@ -->
<button v-on:click="show()">按钮2</button>
<button v-on:dblclick="print(100)">按钮3</button>
<button @click="add(1,2,3)">按钮4</button>
<!-- 问题:跳转时404,没有把url当变量,而是直接把整体当做跳转路径 -->
<a href="{{url}}">百度一下1</a>
<!-- 2.v-bind指令:把url当变量,去获取了变量的值进行跳转
v-bind:href可以简写成:href,意思是后面出现的url是变量不是字符串
-->
<a v-bind:href="url">百度一下2</a>
<a :href="url">百度一下3</a>
</div>
<script>
new Vue({
el:"#app",
data:{
url:"http://www.baidu.com/"
},
methods:{
//函数名:函数声明(参数列表){函数体}
show:function(){
console.log(100)
} ,
print:function(a){
console.log(a);
},
//函数名(参数列表){函数体},是上面函数的简写方式
add(a,b,c){
console.log(a+b+c);
}
}
})
</script>
</body>
</html>
三,Vue组件Component
–1,概述
好处:可以提高前端代码的复用性.
使用步骤:
1,定义组件: 全局组件 + 局部组件
2,使用组件: 就像使用HTML的标签一样
–2,全局组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Component组件</title>
<!-- 1.组件是vue.js的核心功能,先导入vue.js -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2.在数据渲染区 -->
<div id="app">
<!-- 3.2,使用组件,就像使用HTML的标签一样 -->
<Person></Person>
</div>
<div id="a">
<Person></Person>
</div>
<!-- 3.创建Vue对象 -->
<script>
//全局组件:作用范围是可多个Vue对象使用,可以在所有的渲染区使用
//3.1,创建全局组件--1是组件名2是组件内容
// Vue.component(1,2)
Vue.component('Person',{
// template:组件具体要啥内容
template:"<h1>姓名:jack,年龄:20</h1>"
})
new Vue({
el:"#app"
})
new Vue({
el:"#a"
})
</script>
</body>
</html>
–3,局部组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 局部组件</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<Car></Car><!-- 2.使用了局部组件 -->
<Student></Student><!--使用了全局组件-->
</div>
<div id="a">
<Student></Student><!--使用了全局组件-->
</div>
<script>
//全局组件
Vue.component('Student',{
template:'<h1>这是一个全局组件</h1>'
})
//局部组件:只能当前对象(在指定的数据渲染区)使用
new Vue({
el:"#a"
})
new Vue({
el:"#app",
//1.创建局部组件
components:{
//组件名:组件的内容
Car:{
template:"<p>这就是Car组件!</p>"
}
}
})
</script>
</body>
</html>
四,
以上是关于cgb2109-day13的主要内容，如果未能解决你的问题，请参考以下文章