vue
文章目录
1 第一个vue程序
1.1 引入vue包
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
1.2 创建一个div
<div id="box">
<p>{{myname}}</p>
</div>
1.3 创建一个vue对象
<script>
var vm = new Vue({
el:"#box" ,//vue渲染开始的地方
data:{
//状态
myname:"chenbin"
}
})
2 v-html
绑定带有标签的
<body>
<div id="box">
<p v-html="myhtml"></p>
</div>
<script>
var vm = new Vue({
el:"#box" ,//vue渲染开始的地方
data:{
myhtml:"<b>哈哈</b>"
}
})
</script>
3 v-show
动态显示和隐藏
<div v-show="isShow" id="show">动态显示和隐藏</div>
<script>
let show= new Vue({
el:"#show",
data: {
isShow:true
}
});
</script>
4 v-if
动态创建和删除
<div v-show="isCreate" id="create">动态创建和删除</div>
<script>
let create= new Vue({
el:"#create",
data: {
isCreate:true
}
});
</script>
5 动态绑定class 三目、对象、数组
<div id="box" >
<p style="color: red">dddddddd</p>
<button @click="handleClaick()">click</button>
<div :class="isActive?'color:red':'color:yellow'">动态绑定class的三目写法</div>
<div :class="classobj">class的对象写法</div>
<div :class="classarr">class的数组写法</div>
</div>
<script>
new Vue({
el:"#box",
data:{
isActive:false,
classobj:{
a:true,
b:true
},
classarr:['a','c']
},
methods:{
handleClaick(){
this.isActive = !this.isActive
}
}
});
</script>
6 动态绑定style三目、对象、数组
<div id="box" >
<p style="color: red">dddddddd</p>
<button @click="handleClaick()">click</button>
<div :style="isActive?'color:red':'color:yellow'">动态绑定style的三目写法</div>
<div :style="styleobj">style的对象写法</div>
<div :style="stylearr">style的数组写法</div>
</div>
<script>
new Vue({
el:"#box",
data:{
isActive:false,
styleobj:{
background:'red',
fontSize:'30px'
},
stylearr:['background:yellow']
},
methods:{
handleClaick(){
this.isActive = !this.isActive
}
}
});
</script>
7 v-if 和v-else,v-else-if
<div id="box">
<button @click="handleClaick()">click</button>
<div v-if="isCreate">条件渲染if</div>
<div v-else="isCreate">条件渲染else</div>
<ul v-if="isCreate">
<li v-for="datalist in datalist">
{{datalist}}
</li>
</ul>
<ul v-else>
<div>购物车空空如也</div>
</ul>
<!--v-esle-if-->
<div v-if="which===1">1111</div>
<div v-else-if="which===2">2222</div>
<div v-else="which===3">333</div>
</div>
<script>
new Vue({
el:"#box",
data:{
isCreate:true,
datalist:[],
which:1
},
methods:{
handleClaick(){
this.isCreate=!this.isCreate;
this.datalist=['1111','2222'];
}
}
});
</script>
8 v-for
<div id="box">
<!--用in遍历数组 -->
<ul v-for="data in arry">
<li>{{data}}</li>
</ul>
<!--用in遍历数组,显示下标 -->
<ul v-for="(data,index) in arry">
<li>{{data}}----{{index}}</li>
</ul>
<!--用of遍历数组 -->
<ul v-for="data of arry">
<li>{{data}}</li>
</ul>
<!--用in遍历对象 用of遍历也可以-->
<ul v-for="data in obj">
<li>{{data}}</li>
</ul>
<!--用in遍历对象,显示key值-->
<ul v-for="(data,key) in obj">
<li>{{data}}----{{key}}</li>
</ul>
<script>
new Vue({
el:"#box",
data:{
arry:['111','333','555'],
obj:{
name:'zzhangshan',
sex:'男',
age:12
}
}
});
</script>
</div>
9 过滤
<div id="box">
<!-- @input 只要value改变,就会触发-->
<!--v-model 用于双向绑定传值-->
<input type="text" @input="hanldInput()" v-model="mytext"/>
<ul v-for="data in datalist">
<li>
{{data}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#box",
data:{
mytext:'',
datalist:['qqq','aaa','acc','ccc','bbbb'],
list:['qqq','aaa','acc','ccc','bbbb']
},
methods:{
hanldInput(){
// console.log("只要value改变,就会触发")
/*
filter是用于过滤,indexOf()是用来判断一个字符是不是在一个字符串中, 是返回0,不是返回-1
* */
var newlist=this.list.filter(item=>item.indexOf(this.mytext)>-1);
this.datalist=newlist;
console.log(newlist)
}
}
});
</script>
10 事件处理器
<div id="box">
<button @click="handleClick">click</button> <!--只写函数名-->
<button @click="handleClick()">click</button> <!--写函数名带上()-->
<button @click="handleClick($event)">click</button> <!--跟参数-->
<button @click="isShow=!isShow">click</button> <!--如果方法体简单就直接写在里面,不推荐这种写法-->
<div v-show="isShow">111111</div>
</div>
<script>
new Vue({
el:"#box",
data:{
isShow:true
},
methods:{
handleClick(){
this.isShow=!this.isShow;
}
}
});
</script>
11 事件修饰符
<div id="box">
<ul @click.self="handleClick"> <!--只执行父类的-->
<li @click.stop="handleClick">11111</li> <!--只执行子类的点击事件,不会向父类冒泡-->
<li @click.once="handleClick">22222</li> <!--这个链接只会有一次点击有效-->
</ul>
</div>
12 按键修饰符
<div id="box">
<input type="text" @keyup.enter="handleClick"> <!--按回车触发,还可以把enter换成按键对应的数值-->
</div>
<script>
new Vue({
el:"#box",
methods:{
handleClick(){
console.log("事件被触发了");
}
}
});
</script>
13 表单绑定 v-model
<div id="box">
<!--利用v-model来对数据进行双向绑定,不在需要value-->
<input type="text" v-model="mytext">{{mytext}}
<!--单选 v-model的初始值为布尔值-->
<input type="checkbox" v-model="isCheck">记住我 <!--如果isCheck值是true这个单选框会被自动勾选 单选为布尔值-->
<!--多选 v-model的初始值为数组,并且用value来唯一标识区分-->
<input type="checkbox" v-model="checks" value="游泳">游泳
<input type="checkbox" v-model="checks" value="滑冰">滑冰
<input type="checkbox" v-model="checks" value="跳舞">跳舞
<br/>
{{checks}}
<br/>
<!--单项绑定-->
你最喜欢的语言
<input type="radio" v-model="checkone" value="php">php
<input type="radio" v-model="checkone" value="java">java
<input type="radio" v-model="checkone" value="c">c
<br/>
你最喜欢的:{{checkone}}
<!---->
</div>
<script>
let vm=new Vue({
el:"#box",
data:{
/*需要在vue里面对v-model的值进行初始化*/
mytext:'',
isCheck:false,
checks:[],
checkone:''
}
})
</script>
表单绑定修饰符
<div id="box">
<!--在按回车才会出现-->
<input type="text" v-model.lazy="mytext">
<!-- 只显示输入的数字-->
<input type="text" v-model.number="mytext">
<!--去空格-->
<input type="text" v-model.trim="mytext">
{{mytext}}
</div>
<script>
new Vue({
el:"#box",
data:{
mytext:''
}
});
</script>
14 购物车
<div id="box">
全选:<input type="checkbox" @change="handleClick()" v-model="isCheckAll">
<ul v-for="data in datalist">
<li>
<input type="checkbox" v-model="checkgroup" :value="data" @change="handleLiclick()">
{{data}}
<button @click="handledelClick(data)">-</button>
{{data.number}}
<button @click="data.number++">+</button>
</li>
</ul>
{{checkgroup}}<br>
<!--这里必须是一个函数要加括号-->
总金额:{{ getSum() }}
</div>
<script>
new Vue({
el:"#box",
data:{
datalist:[
{
name:'苹果',
price:10,
number:2,
id:'1'
},
{
name:'香蕉',
price:20,
number:1,
id:'2'
},
{
name:'梨',
price:30,
number:3,
id:'3'
}
],
checkgroup:[],
isCheckAll:false
},
methods:{
/*计算总金额*/
getSum(){
var sum=0;
for(i in this.checkgroup){
sum+=this.checkgroup[i].price*this.checkgroup[i].number
}
return sum;
},
/*全选和全不选*/
handleClick(){
if(this.isCheckAll){
/*如果为全选,则勾选的数据为所有数据*/
this.checkgroup=this.datalist
}else {
this.checkgroup=[]
}
},
/*判断每一件商品是否被勾选*/
handleLiclick(){
/*如果勾选的长度等于总长度则是全选*/
if(this.checkgroup.length===this.datalist.length){
this.isCheckAll=true
}else {
this.isCheckAll=false
}
},
/*计算数据减*/
handledelClick(data){
if(data.number==1){
data.number=1;
}else {
data.number--;
}
}
}
});
</script>
15 axios
<div id="box">
<button @click="handleClick()">click</button>
<ul v-for="data in datalist">
<li>{{data.book.name}}</li>
<img :src="data.book.img">
</ul>
</div>
<script>
new Vue({
el:"#box",
data:{
datalist:[]
},
methods:{
handleClick(){
/*get请求*/
axios.get('/user?ID=12345').then(res=>{
console.log(res.data.data.books)//自动包装data属性
this.datalist=res.data.data.books
}).catch(error=>{
console.log(error)
})
/*post请求*/
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(res=> {
console.log(res);
})
.catch(error=> {
console.log(error);
});
}
}
});
</script>
16 计算属性
- 1、计算属性,当依赖的值发生变化时,计算属性会从新计算一遍
- 2、多处调用计算属性时,会将计算属性的结果缓存,直接调用缓存的值即可,不会再调用一遍方法
<div id="box">
<!--计算属性不用加括号,普通方法才需要-->
{{handleClick}}
</div>
<script>
let vm= new Vue({
el:"#box",
data:{
sum:12
},
/*计算属性*/
computed:{
handleClick(){
return this.sum*this.sum
}
}
});
</script>
17 计算属性之模糊查询
<div id="box">
<!-- @input 只要value改变,就会触发-->
<!--v-model 用于双向绑定传值-->
<input type="text" @input="hanldInput()" v-model="mytext"/>
<ul v-for="data in handleClick">
<li>
{{data}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#box",
data:{
mytext:'',
datalist:['qqq','aaa','acc','ccc','bbbb'],
/*计算属性*/
computed:{
handleClick(){
/!*
filter是用于过滤,indexOf()是用来判断一个字符是不是在一个字符串中, 是返回0,不是返回-1
* *!/
return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
}
}
});
</script>
18 组件
注意三点:
- 1、自定义组件需要一个root element
- 2、父子组件的data不能互通
- 3、组件也可以用 data,compoted,methods,但是data必须是一个函数
<div id="box" >
<navrbar></navrbar>
</div>
<script>
/*定义全局组件*/
Vue.component("navrbar",{
template:`
<div>
<div><button @click="handleClick()">返回</button></div>{{list}}
<navrbarchild></navrbarchild>
<div><button>主页</button></div>
<child></child>
</div>
`,
/*局部组件的定义*/
component:{
navrbarchild:
`
<div>我是navbar专属的子节点组件</div>
`
},
method:{
handleClick(){
console.log("我是返回!")
}
},
/*这是和new Vue(){}中data的区别,在这里data必须是个函数*/
data(){
return{
list:"dddddd"
}
}
})
/*全局定义的子节点,任意一个全局定义的组件都可以使用*/
Vue.component("child",{
template:`
<div>我是全局定义的子节点</div>
`
})
new Vue({
el:"#box"
});
</script>
19 父传子
- 1、在 全局定义组件中用props:[]进行接受父组件的自定义属性,用父组件自定义属性的值来替换父组件定义时候的文字显示,最好是通过属性验证来规范自定义属性值的输入
- 2、父组件的自定义属性
- 3、如果父组件的自定义属性值为data中的数据时,需要进行绑定,用冒号
- 4、当解析成布尔值的时候需要添加绑定,不然会解析成字符串
<div id="box">
<!--父组件自定义一个属性,myname-->
<navbar myname="home" :isshow="true"></navbar>
<!--如果myname的值是data里面的数据,则需要数据绑定,用冒号:-->
<!--这个fatherdata就是data中的数据-->
<navbar :myname="fatherdata" :isshow="true"></navbar>
<!--这个:isshow="false" 如果不加冒号进行绑定,会解析成字符串,在v-show="isshow"的时候会解析失败-->
<navbar myname="left" :isshow="false"></navbar>
</div>
<script>
Vue.component("navbar",{
template:`
<div>
<button>返回</button>
navbar --{{myname}}
<button v-show="isshow">首页</button>
</div>
`,
/*接受父组件传来的信息,名字与父组件中自定义的属性名一致*/
// props:['myname','isshow']
/*属性验证,通过属性验证来规范自定义属性值的输入*/
props:{
myname:String,
isshow:Boolean
}
})
new Vue({
el:"#box",
data:{
fatherdata:"这是父组件的信息"
}
});
</script>
20 生命周期方法
//===创建时的四个事件
beforeCreate() { // 第一个被执行的钩子方法:实例被创建出来之前执行
console.log(this.message) //undefined
this.show() //TypeError: this.show is not a function
// beforeCreate执行时,data 和 methods 中的 数据都还没有没初始化
},
created() { // 第二个被执行的钩子方法
console.log(this.message) //床前明月光
this.show() //执行show方法
// created执行时,data 和 methods 都已经被初始化好了!
// 如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作
},
beforeMount() { // 第三个被执行的钩子方法
console.log(document.getElementById('h3').innerText) //{{ message }}
// beforeMount执行时,模板已经在内存中编辑完成了,尚未被渲染到页面中
},
mounted() { // 第四个被执行的钩子方法
console.log(document.getElementById('h3').innerText) //床前明月光
// 内存中的模板已经渲染到页面,用户已经可以看见内容
},
//===运行中的两个事件
beforeUpdate() { // 数据更新的前一刻
console.log('界面显示的内容:' + document.getElementById('h3').innerText)
console.log('data 中的 message 数据是:' + this.message)
// beforeUpdate执行时,内存中的数据已更新,但是页面尚未被渲染
},
updated() {
console.log('界面显示的内容:' + document.getElementById('h3').innerText)
console.log('data 中的 message 数据是:' + this.message)
// updated执行时,内存中的数据已更新,并且页面已经被渲染
}
21 路由
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。
Vue.js 路由需要载入 vue-router 库
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
HTML
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
js
<script>
// 1. 定义(路由)组件。
// 可以从其他文件 import 进来
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
{ path: '/', redirect: '/welcome' }, //设置默认指向的路径
{ path: '/welcome', component: Welcome },
{ path: '/student', component: Student },
{ path: '/teacher', component: Teacher }
]
// 3. 创建 router 实例,然后传 `routes` 配置
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router
})
// 现在,应用已经启动了!
</script>
22 axios
axios是独立于vue的一个项目,基于promise用于浏览器和node.js的http客户端 在浏览器中可以帮助我们完成 ajax请求的发送 在node.js中可以向远程接口发送请求
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
注意:测试时需要开启后端服务器,并且后端开启跨域访问权限
<script>
new Vue({
el: '#app',
//固定的结果
data: {
userList:[]
},
created(){
//调用方法,在页面渲染之前执行
this.getuserList()
},
methods:{
//定义方法
getuserList(){
axios.get("asios.json")
.then(res=>{
//res就是返回的数据,
//真正的数据在res的data里面
this.userList=res.data
})
.catch(error=>{
})
}
}
})
23 element-ui:
element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库,方便程序员进行页面快速布局和构建
官网: http://element-cn.eleme.io/#/zh-CN
会嫖就行了
24 Vue脚手架
24.1 安装node.js
从node官网下载并安装node,安装步骤很简单,只要一路“next”就可以了。
安装完成后,打开命令行工具输入命令*node -v*,如下图,如果出现对应版本号,就说明安装成功了。
我们所需要的npm包管理器,是集成在node中的,所以,直接输入***npm -v***就会如下图所示,显示出npm的版本信息。
到这里node的环境已经安装完了,npm包管理工具也有了,但是由于npm的有些资源被墙,为了更快更稳定,所以我们需要切换到淘宝的npm镜像——cnpm。
24.2 安装cnpm
点击进入淘宝的cnpm网站,里面有详细的配置方法。
或者直接在命令行输入:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
然后等待,安装完成。
输入cnpm -v,可以查看当前cnpm版本,这个和npm的版本还是不一样的。
使用cnpm的方法就是,需要用到npm的地方直接使用cnpm替换就可以了
24.3 vue安装
在用 vue.js 构建大型应用时推荐使用 npm 安装,npm 能很好地和诸如 webpack 或 browserify 模块打包器配合使用。vue.js 也提供配套工具来开发单文件组件。
$ cnpm install vue
24.5 安装vue-cli脚手架构建工具
vue-cli 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:
# 全局安装 vue-cli
$ cnpm install --global vue-cli
24.6 创建一个基于 webpack 模板的新项目
要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。可以使用:
#my-project为自定义项目名
$ vue init webpack my-project
初始化一个项目,或使用
$ vue init webpack-simple my-project