vue练习（上）
2018-10-25 本文已影响0人
6e5e50574d74
1.vue-mvc
<body>
<div id="app">
{{msg}}
</div>
</body>
<script src="../base/vue.js"></script>
<script>
//vue 使用
//模型就是数据
var data = {
msg:'zsq'
}
//每一个库 框架都有实例
new Vue({//m-->c-->v
el:'#app',//模板的挂载
data:{//实例身上的数据
msg:data
}
})
</script>
2.vue-mvvm
/*MVVM
M--------Model 数据
V--------View 将数据的变化情况反映到视图上
VM-------ViewModel 视图模型
区别： vm 和 c
VM和V之间的关系更加的直接 紧密
*/
//不通过Model直接更改数据然后渲染
new Vue({
el:'#app' ,//挂载
data:{
msg:'helsdafdasflo world~'
}
})
3.深入响应式原理
var data ={
student:'zsq'
}
var vm = new Vue({
el:'#app' ,//挂载
data:{
aa:data.student
}
})
//不要在data选项的外面去定义数据
let _data = {
student:'兵哥'
};
let str = 'bingge'
Object.defineProperty(_data,'student',{
get(){
return str
},
set(val){
str = val ;
}
})
console.log(_data)
_data.student = '你好吗'
4.v-"for"
<body>
<div id="app">
<ul>
//两个参数
<li v-for=' (v,i) in list'>
{{v}}---{{i+1}}
</li>
</ul>
</div>
</body>
</html>
<script src="../base/vue.js"></script>
<script>
//1. 上面的东西是假的 只是模板
//2. vue中的directive 作用： 操作DOM
//列表渲染
new Vue({
el:'#app',
data:{
list:['苹果','香蕉','橘子']
}
})
</script>
浏览器显示
图片.png
<body>
<div id="app">
<ul>
//三个参数写法
<li v-for=' (v,key,i) in person'>
{{v}}---{{key}}----{{i+1}}
</li>
</ul>
</div>
</body>
<script src="../base/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
person:{
name:'张帅旗',
age:18,
sex:'man'
}
}
})
</script>
image.png
5.实例"data"里的数据类型可以是任意类型的
<body>
<div id="app">
{{str}} <br>
{{num}} <br>
{{bool}} <br>
{{und===undefined?1:2}} <br>
{{nun}} <br>
{{obj}} <br>
{{arr}} <br>
{{fn}} <br>
</div>
<script src="../base/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
str:'str',
num:123,
bool:true,
und:undefined,
nun:null,
obj:{x:1},
arr:[1,2,3],
fn:function(){alert(1)}
}
})
</script>
</body>
image.png
6.v-bind在循环中绑定数据；简写方式v-bind===:（冒号）。
<body>
<div id="app">
<ul>
<!-- v-bind用法 -->
<li v-for=' (v,i) in list' :key='i'>
{{v}}----{{i}}
</li>
<!-- 循环length为100 -->
<li v-for='(n,i) in 100'>
{{n}}--------{{i}}
</li>
</ul>
</div>
</body>
<script src="../base/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
list:[1,2,2,3,3,4,4,4]
}
})
</script>
image.png
<body>
<div id="app">
<template v-for='v in list'>
<p>
{{v}}
</p>
</template>
</div>
</body>
<script src="../base/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
list:[1,2,2,3,3,4,4,4]
}
})
</script>
image.png
7.v-on事件修饰符
1. 我们是用v-on:eventType = '' 来绑定DOM事件
2. v-on:click=函数的处理程序 只支持简单的js表达式
3. 简写形式 v-on:click === @click
4. 我们的原生事件这边都可以使用 dblclick keyup keydown ...
5. 事件对象e 也是正常使用
6. 传参数的时候，多个参数中如果有一个是事件对象，我们使用$event来代表事件对象
7. 按键修饰符： 自定义 写在全局上 Vue.config.keyCodes.zsq= 80
<!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>
<style>
ul{
padding: 20px;background: rgba(123,31,32,0.5)
}
</style>
<body>
<div id="app">
<button v-on:click='msg="张帅旗"'>
点击
</button>
<button v-on:click='num++'>
点击
</button>
<button v-on:click='alert'>
点击
</button>
<button @click='alert'>
点击
</button>
<button @dblclick='alert'>
双击
</button>
{{msg}}
{{num}}
<input type="text" @keydown = 'num++'>
{{num}}
<button @click = 'event'>
事件对象
</button>
<!-- 传参数 -->
<button @click = 'arguFun("张帅旗")' >
传参数
</button>
<!-- 需求：传多个参数，并且有一个是事件对象 -->
<button @click = 'twoArguments("张帅旗",$event)' >
传两个参数，其中一个是事件对象
</button>
<!-- 需求：有一个ul li 都绑定事件 -->
<ul @click='ulHandle'>
<!-- stop -->
<li @click.stop='liHandle'>
事件冒泡
</li>
</ul>
<!-- self -->
<ul @click.self='ulHandle'>
<li @click='liHandle'>
事件冒泡
</li>
</ul>
<!-- 浏览器的默认行文 表单提交 -->
<form @submit.prevent = 'formSubmit'>
<input type="text">
<input type="submit" value="提交">
</form>
<!-- once -->
<button @click.once = 'num++'>
once{{num}}
</button>
<!-- 按键修饰符 -->
<input type="text" @keyup.13='inputFun'>
{{num}}
<!-- 自定义按键修饰符 -->
<input type="text" @keyup.yyb='inputFun'>
{{num}}
</div>
<script src="../../base/vue.js"></script>
<script>
Vue.config.keyCodes.p = 80 ; //p
new Vue({
el:'#app',
data:{
msg:'Vue',
num:0
},
methods:{//挂着一些方法
alert(){
alert(1)
},
event(e){
console.log(e)
},
arguFun(val){
alert(val)
},
twoArguments(val,m){
console.log(val);
console.log(m)
},
ulHandle(){
alert('ul')
},
liHandle(){
// e.stopPropagation()
alert('li')
},
formSubmit(){
alert('表单提交')
},
inputFun(){
this.num++ ;
}
}
})
</script>
</body>
</html>
8.v-model
<body>
<div id="app">
<input type="text" v-model = 'msg' value="zsq">
{{msg}}
<textarea name="" id="" cols="30" rows="10" v-model = 'msg'>你今天是不是傻？</textarea>
<input type="checkbox" name="" id="" v-model = 'checkboxFlag'>
</div>
<script src="../../base/vue.js"></script>
<script>
//双向数据绑定指令 v-model
/*
1. 使用
2. 作用： 绑定了value,使它和data选项中的数据联系起来 ,原有标签中的value无效
3. 有限制，只能使用在表单中
*/
new Vue({
el:'#app',
data:{
msg:'这里是双向数据绑定的内容',
checkboxFlag:true
}
})
</script>
</body>
9.v-html标签解析
<body>
<div id="app">
<p>
{{num}}
</p>
<!-- 标签解析 v-html-->
<div v-html = 'html'></div>
<!-- 属性的绑定 v-bind-->
<img v-bind:src="src" alt="">
<!-- 简写 v-bind : -->
<img :src="src" alt="">
</div>
<script src="../../base/vue.js"></script>
<script>
/*
单项数据绑定指令 v-bind
1. 属性的绑定
2. 简写 v-bind :
标签解析 ： v-html
*/
new Vue({
el:'#app',
data:{
num:0,
html:'<h3>这里是一个标签</h3>',
src:'https://cn.vuejs.org/images/logo.png'
}
})
</script>
</body>
image.png
10.v-bind、class
<style>
.red{background: red;}
.blue{background: blue;}
.yellow{background: yellow;}
.big{
font-size: 48px;
}
.small{
font-size: 0.5em;
}
</style>
<body>
<div id="app">
<!-- 类名也是属性 所以我们使用的是 v-bind -->
<!-- 1.数组的形式来绑定类名 ？ 因为将来我们使用的类名不止一个 数组中的每一项都是支持简单的js表达式的-->
<!-- <p :class = '[color,(sizeFlag?size:small)]'>
这里是类名的绑定
</p> -->
<!-- 对象的形式 类名： {} a:b a 是类名 b是data选项中的开关-->
<p :class='{"big":sizeFlag,"red":colorFlag}'>
这里是类名的绑定
</p>
</div>
<script src="../../base/vue.js"></script>
<script>
//一个复杂的项目其实就是由简单的小功能组成的
//在vue中，每一个功能的实现，都是遵循这样的步骤的
//1. 寻找关键数据
//2.将关键数据与视图建立联系
// 3.通过控制数据来控制视图效果
new Vue({
el:'#app',
data:{
color:'red',
size:'big',
sizeFlag:true,
small:'small',
colorFlag:true,
}
})
//v-bind的作用是绑定属性的 id，class，style，src...
//v-bind:src-> :src
</script>
</body>
image.png
style
<body>
<div id="app">
<!-- 样式的对象形式 -->
<p :style='{"background":"red","fontSize":"48px"}'>
这里是样式
</p>
<!-- 数组的形式 -->
<p :style='[bg,width]'>
这里是样式
</p>
</div>
<script src="../../base/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
bg:{
background:'blue'
},
width:{
width:'200px'
}
}
})
//v-bind的作用是绑定属性的 id，class，style，src...
//v-bind:src-> :src
</script>
</body>
image.png
11.computed计算属性
<body>
<div id="app">
<p> <button @click="num++" >increment</button> </p>
<p>num: {{num}}</p>
<p> mnum: {{getMnum()}} </p>
<p> mnum: {{num*2+1}} </p>
<p> mnum: {{mnum}} </p>
<p> onum: {{onum}} </p>
<hr>
<p><input type="text" v-model="message"></p>
<p>message: {{message}}</p>
</div>
<script src="./base/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data: {
message: 'hello world',
num:1,
mnum:null
},
methods: {
getMnum () {
console.log('getMnum')
return this.num*2+1
}
},
watch: {//可以去监听某个数据的变化
// num: function (val,oldVal) {//在初始化的时候不执行
// console.log('watch')
// this.mnum = val*2+1
// }，
num: {
immediate: true,//保证初始化的时候也会执行一些回调函数
handler: function (val) {
this.mnum = val*2+1
}
}
},
computed: {
onum: function () {
//键名为要新增的属性，在回调函数里建立关系
console.log('computed')
return this.num * 2 + 1
}
}
})
//有如下需求：需要根据现有数据得到一个新的数据，彼此之间有联系
// 1. 可以使用方法，在方法中返回正确的数据，在模板中使用这个方法
// 这样的解决方法有问题，当无关数据更改的时候，重新渲染的时候，会重新执行这个方法，虽然没有必要
// 2. 可以直接在mustache里面写计算的表达式，这样的话，不方便代码复用和维护，而且当无关数据改变的时候，也会受到影响
// 3. 可以使用watch，先去挂载一个新的数据，然后去监听现有数据，当现有数据改变的时候，去改变新数据
// 有一点小缺点：逻辑会复杂一些，并且当维护的时候，需要至少更改两个地方
// 在vue中，提供了一个专门的api：computed（计算属性）
// 作用：专门复杂，根据一个现有数据去生成一个新数据，并且这两个数据直接会建立永久的关系，并且会建立缓存，当无关数据改变的时候，不会重新计算而是直接使用缓存中的值!!!
</script>
</body>
image.png
image.png
