历史介绍
- angular 09年,年份较早,一开始大家是拒绝 star 33.4k
- react 2013年,用户体验好,知道拉到一堆粉丝 star:89k
- Vue 2014年,用户体验好, star:84.6k
前端框架与库的区别?
- jQuery:->DOM(操作DOM)+请求
- art-template->模板引擎
- 框架=全方位功能齐全
简易的DOM体验+发请求+模板引擎+路由功能
KFC的世界里,库就是一个小套餐,框架就是全家桶
代码上不同
一般使用库的代码,是调用某个函数,我们自己把控库的代码
一般使用框架,其框架在帮我们运行我们编写好的代码
Vue起步
- 1.引包
- 2.启动new Vue(el:目的地,template:模板内容);
- options(目的地:el,内容:template,数据:data)
插值表达式
- {{表达式}}
对象(不要连续3个{{{name:'Jack'} }})
字符串{{'xxx'}}
判断后的布尔值{{true}}
三元表达式{{true?正确:错误}}
- 可以用于页面中简单粗暴的调试
- 注意:必须在data这个函数中返回的对象中声明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue起步</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- 引包 -->
<script src="../node_modules/vue/dist/vue.js"></script>
<!-- 通过Vue对象去new Vue(options) -->
<script>
//启动Vue
new Vue({
// el:发生行为的目的地
el:document.getElementById('app'),
//el:'#app',
//template:装载的模板
template:'<div><h1>大家好 {{text}}</h1></div>',
//动态数据的声明
data:function(){ //也可以使用对象,不用太在意
return{
//template中要使用的数据
text:'hello vue'
}
}
});
</script>
</body>
</html>
什么是指令
- 在Vue中提供了一些对于页面+数据的更为方便的操作,这些操作就叫指令,类似HTML页面中的属性
- 比如在angular中以ng-xxx开头的就叫指令
- 在Vue中以v-xxx开头的就叫指令
- 指令中封装了一些DOM行为,结合属性作为一个暗号,暗号有对应的值,根据不同的值,框架会进行相关DOM操作的绑定
Vue的常用指令
- v-text元素的innerText属性,必须是双标签
- v-html元素的innerHTML
- v-if判断是否插入这个元素
- v-else-if
- v-else
- v-show隐藏元素.如果确定要隐藏,会给元素的style加上display:none
v-bind使用
- 给元素的属性赋值.可以给已经存在的属性赋值,也可以给自定义属性赋值
- 语法 在元素上,v-bind:属性名="常量||变量名"
- 简写形式 :属性="变量名"
v-on的使用
- 处理自定义原生事件的,给按钮添加click,并让使用变量的样式改变
- 在元素上:v-on:原生事件名="给变量进行操作||函数名"
- 简写形式 @原生事件名="给变量进行操作||函数名"
v-model
双向数据流(绑定):页面改变影响内存(js),内存(js)改变影响大小
v-bind和v-model的区别
- v-bind可以给任何属性赋值,是从Vue到页面的单向数据流
- v-model只能给具备value属性的元素进行双向数据绑定(必须使用的是有value属性的元素)
v-for的使用
- 基本语法:v-for="item in arr"
- 对象的操作:v-for="item in obj"
- 如果是数组没有id:v-for="(item,index) in arr" :class="index" 奇偶数不同样式 :class="index%2==0?'red':'green'"
关于对象内的this
- Vue已经把以前this是window或者时间对象的问题搞定了
- methods和data本身是在同一个对象中的,所以该对象可以通过this随意取
- this.xxx取data中的值,this.xxxMethod调methods中的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.a{
background-color: red;
}
.b{
background-color:green;
}
.c{
background-color:blue;
}
</style>
</head>
<body>
<div id="app">
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
template:`
<div>
<h1 v-text="myText"></h1>
<hr>
<span v-html="myHtml"></span>
<!-- 以下的三个指令的使用,必须是相邻的DOM元素-->
<h1>v-if的使用</h1>
<button v-if="num==1">测试v-if</button>
<button v-else-if="num==2">测试v-else-if</button>
<button v-else>测试v-else</button>
<h1>v-show的使用</h1>
<button v-show="isShow">我是v-show</button>
<hr>
<input type="text" v-bind:value="myValue" :file=" 'xxx' ">
<h1>单向数据绑定v-bind</h1>
<button v-on:click=" myValue='abc'">点我改变value</button>
<button @click=" myValue='123'">简写:点我改变value</button>
<h1>双向数据绑定v-model</h1>
<input type="text" v-model="myValue">
<!--当用户输入xxx的时候,显示下面的button-->
<button v-show="myValue=='xxx'">用户输入的是xxx</button>
<h1>v-for的使用</h1>
<ul>
<li v-for="item in stus" :class="item.score" >
{{item.name}}
</li>
</ul>
<ul>
<li v-for="(val,key,index) in stus2" :class="index%2==0?'a':'b'">
val:{{val}}
key:{{key}}
index:{{index}}
</li>
</ul>
<h1>methods的使用</h1>
<h1 v-show="isShow">1</h1>
<h1 v-show="isShow">2</h1>
<h1 v-show="isShow">3</h1>
<h1 v-if="isShow">4</h1>
<button @click="changeIsShow">打开/折叠</button>
</div>
`,
data:function(){
return{
myText:'我是v-text的值',
myHtml:'<h1>我是一个HTML</h1>',
isExit:true,
num:3,
isShow:true,
myValue:'asfjdoaihf',
stus:[
{name:'张三',score:'a'},
{name:'李四',score:'b'},
{name:'王五',score:'c'}
],
stus2:{'A':'张三','B':'李四','C':'王五',}
}
},
//key是函数名,value是函数体
methods:{
changeIsShow:function(){
//this就是data函数return出去的对象
//vue帮我们处理的this指向,不是事件对象了
this.isShow=!this.isShow;
}
}
});
</script>
</body>
</html>
渲染组件--父使用子组件
- 1.创建子组件(对象)
- 2.在父组件中声明,根属性components:{组件名:组件对象}
- 3.在父组件要用的地方使用<组件名></组件名>
在不同的框架中,有的不支持大写字母,用的时候
组件名:MyHeader
使用:my-header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
var myHeader={
template:`<div>我是头部</div>`
};
//函数调用的方式创建组件
var myBody=Vue.extend({
template:`<div>我是函数调用的方式创建的组件</div>`
});
// var myBody={
// template:`<div>我是中部</div>`
// };
var myFooter={
template:`
<div>我是底部
<button @click="showNum(123)">点我</button>
</div>
`,
methods:{
showNum:function(num){
alert(num);
}
},
};
//声明入口组件
var App={
components:{
'my-header':myHeader,
'my-body':myBody,
'my-footer':myFooter
},
template:`
<div>
<my-header></my-header>
<my-body></my-body>
<my-footer></my-footer>
</div>
`
};
new Vue({
el:'#app',
components:{//声明要用的组件们
//key是组件名,value是组件对象
app:App
},
//只有在new Vue中,可以使用单标签
template:'<app/>', //入口组件
});
</script>
</body>
</html>
父子组件传值(父传子)
- 1.父用子的时候通过属性传递
- 2.子要声明props:['属性名']来接收
- 3.收到就是自己的了,随便你用(在template中直接用,在js中this.属性名用)
- 补充:常量传递直接用,变量传递加冒号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
var Son={
template:`
<div>
<!--3-->
接收到父组件的数据是:{{title}}
<h1 v-if="xxx">1</h1>
<h1 v-show="xxx">2</h1>
<ul>
<li v-for="stu in ['张三','李四']">
{{stu}}
</li>
</ul>
<button @click="changeXXX">改变显示</button>
<hr/>
单向数据流(Vue->html):<input type="text" :value="text"><br/>
双向数据流(vue->html->vue):<input type="text" v-model="text"></br>
<h1>主要看这里</h1>
{{text}}
</div>
`,
data:function(){
return {
xxx:true,
text:'hello'
}
},
methods:{
changeXXX:function(){
this.xxx=!this.xxx;
}
},
//2.声明接收参数:
props:['title']
};
//其实父向子传递,就是v-bind给元素的属性赋值
var App={
components:{
son:Son
},
//1
template:`
<div>
<son :title="xxx"></son>
</div>
`,
data:function(){
return {
xxx:'我是xxx数据'
}
}
};
new Vue({
//data就不在这个组件对象中写了(启动组件)
el:'#app',
components:{
app:App
},
template:`<app/>`
});
</script>
</body>
</html>