vue-day01
1.vue的介绍
作者介绍 框架的介绍
2.vue官网
https://cn.vuejs.org/
3.vue的优点
易用，灵活，高效
4.库与框架区别
库：只具有某一种功能
框架：具备完整的功能 bootstrap element-ui
5.开发环境与生产环境
开发环境地址:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>生产环境地址:<script src="https://cdn.jsdelivr.net/npm/vue">script>6.vue特点
数据驱动 组件化 单页面应用
7.vue中指令(text)
v-text:与原生的innerText一致，只识别字符串
v-html:与原生的innerHTML一致，可以识别标签
8.vue中指令与插值的使用
插值表达式后面的内容会展示
通过指令绑定元素之间的内容不会显示
9.vue中指令(if)
v-if v-else-if v-else 如果......否则......
10.vue中的指令(show)
两者区别:
1.v-if是动态的向dom树中添加、删除元素
v-show通过设置css样式来实现
2.v-if是真实创建其具有惰性，如果初始值是false则不会渲染,同时也不会被缓存
v-show:无论初始值是否真假都会先渲染
总结:如果需要频繁切换需要用v-show
11.vue中的方法使用(v-on)
let vm = new Vue({ el:'#app', data:{ name:'宏超' }, // 所有的方法存放在methods中 methods: { say(name){ alert('hi,'+name) }, say2(){ console.log(this) console.log('hi,'+this.name) } }, })直接使用 {{say2()}} 调用<body> <div id="app"> <div @click = 'alertName'>点击实现效果div> <div @click = 'alertName2("褚阳森")'>点击实现效果div> <div @click = 'num++'>点击实现效果div> {{num}} div>body><script src="./vue.js">script><script> let vm = new Vue({ el:'#app', data:{ name:'志宝', num:0 }, methods: { alertName(){ alert(this.name) }, alertName2(name){ alert(name) } }, })script>注意：v-on:click='方法名' 可以简写为:@click='方法名'
1.绑定事件的另种方式：a.直接写方法名 b.直接写表达式(一般常用简单的表达式)
12.v-for(数组)
<body> <div id="app"> <span v-for='item in arr'>{{item}}span> <p v-for='(item,index) in arr'>{{index}}-----{{item}}p> div>body><script src="./vue.js">script><script> let vm = new Vue({ el:'#app', data:{ arr:['苹果','香蕉','橘子','榴莲'] }, methods: { }, })script>注意点: v-for 循环数组可以传递2个参数，第一个是数组的每一项，第二个是数组的索引
13.v-for(对象)
<body> <div id="app"> <span v-for='item in objs'>{{item}}span> <p v-for='(value,key,index) in objs'>{{key}}-----{{value}}-------{{index}}p> div>body><script src="./vue.js">script><script> let vm = new Vue({ el:'#app', data:{ objs:{ '水果':'苹果，香蕉，橘子', '蔬菜':'小白菜，土豆，芹菜' } }, methods: { }, })script>注意：循环对象的时候，传递三个参数，分别代表value，key,index 位置不可以更换
14.v-bind绑定属性
<body> <div id="app"> <a v-bind:href="href" v-bind:title="title" v-bind:msg='msg'>点击跳转a> <a :href="href" :title="title" :msg='msg'>点击跳转a> div>body><script src="./vue.js">script><script> let vm = new Vue({ el: '#app', data: { href:'https://www.baidu.com', title:'我是标题1111', msg:'hello' }, methods: { }, })script>注意：v-bind: 可以简写为 :title:'abc'
15.动态绑定样式class
<body> <div id="app"> <div class="box">我是普通样式渲染div> <div :class="className">我是第一种样式渲染div> <div :class="objClass">我是第二种样式渲染div> <div :class="[1==1?'blue':'yellow']">我是第三种样式渲染div> <div :class='"yellow " + font'>我是第四种样式渲染div> <div :class='"yellow " + "font"'>我是第四种样式渲染div> div>body><script src="./vue.js">script><script> let vm = new Vue({ el: '#app', data: { className:'pink', objClass:{ 'orange':true, 'font':true, }, font:'font' }, methods: { }, })script>注意：普通情况用第一种和普通绑定即可，如果后期需要动态添加那么就需要用到第四种
15.动态绑定style
我是通过style来设置的我是第二种通过style绑定我是第三种通过style绑定注意：如果需要绑定多个样式，需要用对象的方式，如果需要绑定多个类名，需要用数组的方式
-----------------------------------这是分割线--------------------------------
简单选项卡操作：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.title {
width: 100px;
height: 30px;
border: 1px solid #000;
float: left;
}
.clear{
clear: both;
}
.box {
width: 304px;
height: 100px;
border: 1px solid #bfc;
font-size: 30px;
text-align: center;
}
.pink{
color: pink;
}
.green{
color: green;
}
.red{
color: red;
}
style>
head>
<body>
<div id="app">
<div :class="[title,item.color]" @click = "isShow(index)" v-for="(item,index) in list">{{item.tag}}div>
<div class="clear">div>
<div :class='"box " +item.color ' v-if = "item.show" v-for = "(item,index) in list">{{item.content}}div>
div>
body>
<script src="../vue.js">script>
<script>
let vm = new Vue({
el: "#app",
data:{
title:"title",
list:[
{tag:"选项卡一",content:"内容一",show:true,color:"pink"},
{tag:"选项卡二",content:"内容二",show:false,color:"green"},
{tag:"选项卡三",content:"内容三",show:false,color:"red"}
]
},
methods:{
isShow(index){
for(let i = 0;i<this.list.length;i++){
this.list[i].show = false;
}
this.list[index].show = true;
}
}
})
script>
html>
,ajax跨域请求（CORS实现）)
)
