vue.js
1.引包、留坑、实例化、插值表达式{{}}
-
引包
-
确认已经下载了node,然后执行命令 npm install vue (如需下载自己要的版本在vue后面加上@版本号)
-
页面引入刚下载的包
<script type="text/javascript" src="vue.js"></script>
-
-
留坑 即留一个vue模板插入的地方或者是vue代码对其生效的地方
-
实例化 即启动Vue
启动： new Vue({el:目的地,template:模板内容});实例化传入的是一个对象options
- options
- 目的地 el 对应上面留坑的坑位，可通过id名，类名，标签名来查找 。方式和jq一样
- 内容 template
- 数据 data 值为函数形式也可是对象，但是都是用函数，因为用的函数最后也是return一个对象
- options
-
插值表达式{{ }}
- 插值表达式内填入data里面的变量即可在页面取到变量值{{ data里的变量 }}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
template: `
<div>我这里是模板内容{{msg}}</div> //根节点只能有一个，不能并列两个div,但可以在外面写个大的div去包括，则不会报错。
`,
data:function(){
return{
msg:'Hello vue!'
}
}
})
</script>
</body>
</html>
2.熟悉及使用常用指令
什么是指令
- 在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。
- 譬如在HTML页面中这样使用
<div v-xxx=''></div>
- 譬如在HTML页面中这样使用
- 在vue中v-xxx就是vue的指令
- 指令就是以数据去驱动DOM行为的,简化DOM操作
常用的指令有哪些，及怎么使用这些指令
-
v-text 不可解析html标签，元素的innerText 必须是双标签
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 2.留坑 --> <div id="app"></div> <!-- 1.引包 --> <script type="text/javascript" src="./vue.js"></script> <!-- 3.实例化 --> <script type="text/javascript"> new Vue({ el:'#app', template:` <div> <div v-text="mytext"></div> </div> `, data:function(){ return{ mytext:'我这里是v-text' } } }) </script> </body> </html>//我这里是v-text
-
v-html 可解析html标签，元素的innerHTML
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 2.留坑 --> <div id="app"></div> <!-- 1.引包 --> <script type="text/javascript" src="./vue.js"></script> <!-- 3.实例化 --> <script type="text/javascript"> new Vue({ el:'#app', template:` <div> <div v-text="mytext"></div> <hr> <div v-html="myhtml"></div> </div> `, data:function(){ return{ mytext:'<h1>我这里是v-text</h1>', myhtml:'<h1>我这里是v-html</h1>' } } }) </script> </body> </html>
-
v-if 做元素的插入（append）和移除（remove）操作
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 2.留坑 --> <div id="app"></div> <!-- 1.引包 --> <script type="text/javascript" src="./vue.js"></script> <!-- 3.实例化 --> <script type="text/javascript"> new Vue({ el:'#app', template:` <div> <div v-text="mytext"></div> <hr> <div v-html="myhtml"></div> <button v-if="checkif">测试v-if</button> </div> `, data:function(){ return{ mytext:'<h1>我这里是v-text</h1>', myhtml:'<h1>我这里是v-html</h1>', checkif:true //true表示可见，false不可见 } } }) </script> </body> </html> -
v-else-if
-
v-else
-
v-show display:none 和display：block的切换
-
v-for
-
数组 item，index
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 2.留坑 --> <div id="app"></div> <!-- 1.引包 --> <script type="text/javascript" src="./vue.js"></script> <!-- 3.实例化 --> <script type="text/javascript"> new Vue({ el:'#app', template:` <div> <div v-text="mytext"></div> <hr> <div v-html="myhtml"></div> <button v-if="num==1">测试v-if</button> <button v-else-if="num==2">测试v-else-if</button> <button v-else>测试v-else</button> <div v-show="checkshow">我是v-show</div> <ul> <li v-for="(item,index) in arrayfor">{{item}}-{{index}}</li> </ul> </div> `, data:function(){ return{ mytext:'<h1>我这里是v-text</h1>', myhtml:'<h1>我这里是v-html</h1>', num:2, checkshow:true, arrayfor:['篮球','足球','乒乓球'], } } }) </script> </body> </html>
-
对象 value，key ，index
-
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 2.留坑 -->
<div id="app"></div>
<!-- 1.引包 -->
<script type="text/javascript" src="./vue.js"></script>
<!-- 3.实例化 -->
<script type="text/javascript">
new Vue({
el:'#app',
template:`
<div>
<div v-text="mytext"></div>
<hr>
<div v-html="myhtml"></div>
<button v-if="num==1">测试v-if</button>
<button v-else-if="num==2">测试v-else-if</button>
<button v-else>测试v-else</button>
<div v-show="checkshow">我是v-show</div>
<ul>
<li v-for="(item,index) in arrayfor">{{item}}-{{index}}</li>
</ul>
<ul>
<li v-for="(oj,key) in ojfor">{{key}}--{{oj}}</li>
</ul>
</div>
`,
data:function(){
return{
mytext:'<h1>我这里是v-text</h1>',
myhtml:'<h1>我这里是v-html</h1>',
num:2,
checkshow:true,
arrayfor:['篮球','足球','乒乓球'],
ojfor:{play:'篮球',people:'caojun',age:'19'}
}
}
})
</script>
</body>
</html>
3.阐述vue单双向数据流及事件绑定
vue单向数据流绑定属性值 v-bind: (属性) 简写 :(属性)
例子：
`<input v-bind:value="name" v-bind:class="name">`
- 单向数据绑定 内存改变影响页面改变
- v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染
vue双向数据流 v-model 只作用于有value属性的元素
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--2.留坑-->
<div id="app"></div>
<!--1.引包-->
<script src="./vue.js" type="text/javascript"></script>
<!--3.实例化-->
<script>
new Vue({
el: "#app",
template:`
<div>
单向数据绑定
<input type="text" v-bind:value="name":class="name"><br>
双向数据绑定
<input type="text" v-model="name"/>
</div>
`,
data:function(){
return{
name:'hello'
}
}
})
</script>
</body>
</html>
- 双向数据绑定 页面对于input的value改变，能影响内存中name变量
- 内存js改变name的值，会影响页面重新渲染最新值
事件绑定v-on:事件名=“表达式||函数名” 简写 @事件名=“表达式||函数名”
- 事件名可以是原生也可以是自定义的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--2.留坑-->
<div id="app"></div>
<!--1.引包-->
<script src="./vue.js" type="text/javascript"></script>
<!--3.实例化-->
<script>
new Vue({
el: "#app",
template:`
<div>
单向数据绑定
<input type="text" v-bind:value="name":class="name"><br>
双向数据绑定
<input type="text" v-model="name"/></br>
{{name}}
<button v-on:click="change">点击我改变name变量</button>
</div>
`,
data:function(){
return{
name:'hello'
}
},
methods:{
change:function(){
this.name='我改变了，实在方法属性里面定义的方法'
}
}
})
</script>
</body>
</html>
总结
v-model 双向数据绑定
- vue页面改变影响内存（js）
- 内存（js）改变影响vue页面
v-bind 单向数据绑定只是内存（js）改变影响vue页面
4.过滤器
-
过滤器就是可以对我们的数据进行添油加醋然后再显示
-
过滤器有全局过滤器和组件内的过滤器
-
全局过滤器Vue.filter(‘过滤器名’,过滤方式fn );
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>过滤器</title> </head> <body> <!--2.留坑 --> <div id="app"> 我输入的：<input type="text" name="" v-model='instring'><br> 我输出的：{{instring}} <br> {{instring | reversal('翻转输出：')}} </div> <!--1.引包 --> <script type="text/javascript" src="./vue.js"></script> <!--3.实例化 --> <script type="text/javascript"> // 全局过滤器 Vue.filter('reversal',function(val,msg2){ return msg2+val.split('').reverse().join('') }) new Vue({ el:'#app', data(){ return{ instring:'' } }, // filters:{ // reversal(val,msg){ // <!-- 字符串转数组 翻转 数组转字符串 --> // return msg+val.split('').reverse().join('') // } // } }) </script> </body> </html> -
组件内的过滤器 filters:{ ‘过滤器名’,过滤方式fn }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>过滤器</title> </head> <body> <!--2.留坑 --> <div id="app"> 我输入的：<input type="text" name="" v-model='instring'><br> 我输出的：{{instring}} <br> {{instring | reversal('翻转输出：')}} </div> <!--1.引包 --> <script type="text/javascript" src="./vue.js"></script> <!--3.实例化 --> <script type="text/javascript"> new Vue({ el:'#app', data(){ return{ instring:'' } }, filters:{ reversal(val,msg){ <!-- 字符串转数组 翻转 数组转字符串 --> return msg+val.split('').reverse().join('') } } }) </script> </body> </html>
-
{{ msg | 过滤器名}}
-
-
最终都是在过滤方式fn里面return产出最终你需要的数据
vue中的this是vue封装好给我们使用的，跟平常方法里面的this是不同的
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>过滤器</title>
</head>
<body>
<!--2.留坑 -->
<div id="app">
我输入的：<input type="text" name="" v-model='instring'><br>
我输出的：{{instring}} <br>
{{instring | reversal('翻转输出：')}}
</div>
<!--1.引包 -->
<script type="text/javascript" src="./vue.js"></script>
<!--3.实例化 -->
<script type="text/javascript">
// 全局过滤器
console.log(this);
Vue.filter('reversal',function(val,msg2){
return msg2+val.split('').reverse().join('')
})
new Vue({
el:'#app',
data(){
return{
instring:''
}
},
created(){
console.log(this,'vue的')
}
// filters:{
// reversal(val,msg){
// <!-- 字符串转数组 翻转 数组转字符串 -->
// return msg+val.split('').reverse().join('')
// }
// }
})
</script>
</body>
</html>
5.数据监听watch计算属性computed
-
使用wach监听
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <div>watch监听数据</div> <input type="text" name="" v-model="msg"> <!-- 进行数据的双向绑定 --> </div> <script type="text/javascript" src="./vue.js"></script> <script type="text/javascript"> new Vue({ el: "#app", data(){ return{ msg: '' } }, watch:{ msg(newval,oldval){ console.log(newval,oldval);//监听打印新旧数据 } } }) </script> </body> </html>
watch监听单个，computed监听多个
思考业务场景：
- 类似淘宝，当我输入某个人名字时，我想触发某个效果
- 利用vue做一个简单的计算器
当watch监听的是复杂数据类型的时候需要做深度监听（写法如下）
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div>watch监听数据</div>
<input type="text" name="" v-model="msg.text">
<!-- 进行数据的双向绑定 -->
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data(){
return{
msg: {text:''}
}
},
watch:{
// msg(newval,oldval){
// // console.log(newval,oldval);//监听出新旧数据
// if(newval=='love'){
// alert(newval);
// }
// }
//开启复杂数据监听
msg:{
handler(newval,oldval){
if (newval.text=='love') {
alert(newval.text);
}
},
deep:true //开启数据监听，必须
}
}
})
</script>
</body>
</html>
computed 监视对象,写在了函数内部, 凡是函数内部有this.相关属性,改变都会触发当前函数
vue做一个简单的计算器
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div>watch监听数据</div>
<input type="text" name="" v-model="msg.text">
<!-- 进行数据的双向绑定 -->
<div>computed计算属性</div>
(<input type="text" name="" v-model="n1">+
<input type="text" name="" v-model="n2">)*
<input type="text" name="" v-model="n3"> = {{result}}
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data(){
return{
msg: {text:''},
n1:'',
n2:'',
n3:'1'
}
},
computed:{
result(){
return (Number(this.n1)+Number(this.n2))*Number(this.n3)
}
},
watch:{
// msg(newval,oldval){
// // console.log(newval,oldval);//监听出新旧数据
// if(newval=='love'){
// alert(newval);
// }
// }
//开启复杂数据监听
msg:{
handler(newval,oldval){
if (newval.text=='love') {
alert(newval.text);
}
},
deep:true //开启数据监听，必须
}
}
})
</script>
</body>
</html>
6.组件化开发(框架的核心)
-
创建组件的两种方式
-
var Header = { template:‘模板’ , data是一个函数,methods:功能,components:子组件们 }//局部声明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> //先进行局部的声明 var MyHeader={ template:` <div>我是头部</div> ` } var MyBody={ template:` <div>我是身体</div> ` } new Vue({ el:'#app', //进行局部的注册 components:{ MyHeader, MyBody }, template:` <div> <my-header></my-header> <my-body></my-body> </div> `, data(){ return{ } } }) </script> </body> </html> -
Vue.component(‘组件名’,组件对象);//全局注册 等于注册加声明了
-
-
组件类型
- 通用组件（例如表单、弹窗、布局类等)
- 业务组件（抽奖、机器分类）
- 页面组件（单页面开发程序的每个页面的都是一个组件、只完成功能、不复用）
115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
