指令
模板语法
1.1 数据绑定
插值表达式 {{}}
v-text 原样输出
v-html 先解析html元素再输出
1.2 属性绑定
基本使用
v-bind:自定义属性名称 = "属性值"
v-bind="obj"
简写
:自定义属性名称 = "属性值"
class样式绑定
普通数组
:class = "['class1','class2','class3']"
数组三元
:class = "['class1','class2',flag?'class3':'']"
数组对象
:class = "['class1','class2',{class3:flag}]"
普通对象
:class = "{class1:true,class2:true,class3:true}"
style样式绑定
:style="{color:'red'}"
:style="obj"
:style="[obj1,obj2]"
1.3 事件绑定
事件源 事件类型 事件的处理函数
js
btn.onclick= function(){}
vue
v-on:事件类型 = '事件处理函数'
事件修饰符
鼠标事件
阻止默认行为 prevnet once
阻止冒泡 stop
键盘事件
enter
列表渲染
v-for
条件渲染
v-show
v-if
<body>
<!--
挂载点
模板
实例
数据驱动
-->
<!-- 隐式模板 -->
<div id="app">
{{msg}}
</div>
<!-- 数据只能在模板中使用 -->
{{msg}}
<script>
// vm 就是实例
const vm = new Vue({
// el 指定模板模板的位置
el: '#app',
data: {
msg: 'hello vue'
},
// 显式模板
// template: '<div>{{msg}}</div>'
})
</script>
</body>
MVC： 针对于后端的分层模式
model 数据连接层 mysql mongodb
view 视图层
controller 控制层
router 路由分发
service 业务处理
MVVM：针对前端的分层模式
model 数据模型 死数据或者是后台网络请求的数据
view 视图模型 渲染model的数据
view model 管理model和 view 数据的存、取
让视图和业务处理更加清晰，而且在vue中只需要关注 视图
<body>
<div id="app">
<!-- 模板语法 -->
<h2>渲染指令</h2>
<!-- 插值表达式 -->
<div> {{msg2}}</div>
<!-- 属性计算 -->
<div> {{1+1}}</div>
<!-- 三元运算符 ，不能使用 if else -->
<div>{{flag?'显示':'隐藏'}}</div>
<!-- v-text 原样输出 -->
<div v-text="msg2"></div>
<!-- v-html 先解析html元素再渲染 -->
<div v-html="msg2"></div>
</div>
<script src="./lib/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: 'hello vue',
msg2: '<strong>hello vue</strong>',
flag: false
}
})
</script>
</body>
<body>
<div id="app">
<!-- 绑定单个属性 -->
<!-- <h2 v-bind:title="msg" v-bind:des="des">属性绑定v-bind</h2> -->
<!-- 绑定对象 -->
<!-- <h2 v-bind="obj">属性绑定v-bind</h2> -->
简写方式
<h2 :title="msg" :des="des">属性绑定v-bind</h2>
<!-- 不能再简写了 -->
<!-- <h2 :="obj">属性绑定v-bind</h2> -->
</div>
<script src="./lib/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: 'hello vue',
des: '描述',
obj: {
msg: 'hello vue',
des: '描述',
}
}
})
</script>
</body>
class样式绑定
<body>
<div id="app">
<h2 class="color bg active">class样式绑定</h2>
<!-- 普通数组 -->
<h2 :class="['color','bg','active']">class样式绑定</h2>
<!-- 数组三元 -->
<h2 :class="['color','bg',flag?'active':'']">class样式绑定</h2>
<!-- 数组对象 对象中的key不需要添加引号 -->
<h2 :class="['color','bg',{active: flag}]">class样式绑定</h2>
<!-- 普通对象写法 -->
<h2 :class="obj">class样式绑定</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
flag: false,
obj: {
color: true,
bg: true,
active: false
}
},
created() {
},
methods: {
}
})
</script>
</body>
style样式绑定
<body>
<div id="app">
<h2 style="color:red;font-size:50px">style样式绑定</h2>
<!-- 直接设置对象 -->
<h2 :style="{color:'red',fontSize: '50px'}">style样式绑定</h2>
<!-- 把对象抽离 -->
<h2 :style="objStyle1">style样式绑定</h2>
<!-- 多个对象使用设置在数组中 -->
<h2 :style="[objStyle1,objStyle2]">style样式绑定</h2>
</div>
<script src="./lib/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
objStyle1: {
color: 'red',
fontSize: '50px'
},
objStyle2: {
background: 'pink'
}
},
created() {
},
methods: {
}
})
</script>
</body>
事件绑定
<body>
<div id="app">
<!-- 如果没有传参默认传递event 对象 -->
<button v-on:click="hanldeClick">点我</button>
<!-- $event是内置的 事件对象 -->
<button v-on:click="hanldeClick($event)">点我</button>
<!-- 如果设置小括号可以传递具体的值 -->
<button v-on:click="hanldeClick(1)">点我</button>
<!-- 简写 -->
<button @click="hanldeClick(1)">点我</button>
</div>
<script src="./lib/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
},
methods: {
hanldeClick(e) {
console.log(e)
console.log('点我')
}
}
})
</script>
</body>
基本修饰符
<body>
<div id="app">
<!-- 冒泡 -->
<div class="divOut" @click="hanldeOut">
<div class="divIn" @click.stop="hanldeIn">
</div>
</div>
<a href="https://baidu.com" @click.prevent="goDetail">去百度</a>
<a href="https://baidu.com" @click.prevent.once="goDetail">去百度只阻止一次</a>
<input type="text" :value="value" @keyup.enter="hanldeInput">
<!-- <input type="button" value="确认" @click="hanldeInput"> -->
</div>
<script src="./lib/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
value: ''
},
methods: {
hanldeOut(e) {
console.log('out')
},
hanldeIn(e) {
console.log('in')
// js 原生写法
// e.stopPropagation()
},
goDetail(e) {
console.log('go')
// js 原生写法
// e.preventDefault()
},
hanldeInput(e) {
console.log(e.target.value)
}
}
})
</script>
</body>
双向绑定
<body>
数据流
单向数据绑定 : model改变，view跟着改变，不能反过来
双向数据绑定 : model改变，view跟着改变，反之亦然
<div id="app">
<input type="text" :value="value">
<input type="text" v-model="value">
</div>
<script src="./lib/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
value: ''
}
})
</script>
</body>
v-model双向绑定原理
<body>
v-model的双向数据绑定原理
1. 使用属性绑定
2. 利用事件绑定 input
当input触发的时候重新给绑定的数据赋值
v-model只能在 表单元素和组件上使用
<div id="app">
<input type="text" :value="value" @input="hanldeInput">
</div>
<script src="./lib/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
value: ''
},
methods: {
hanldeInput(e) {
this.value = e.target.value
}
}
})
</script>
</body>
vue2数据双向绑定原理
<body>
<div id="text"></div>
<input type="text" id="input" />
<script>
var obj = {
}
// 参数1 监听的对象
// 参数2 监听的对象的属性
// 参数3 obj 可以设置 get set
Object.defineProperty(obj, 'txt', {
get() {
return obj
},
set(val) {
// console.log(val)
document.getElementById('text').innerHTML = val
document.getElementById('input').value = val
}
})
obj.txt = 1
document.getElementById('input').addEventListener('keyup', function (e) {
// console.log(e.target.value)
obj.txt = e.target.value
})
</script>
</body>
vue3数据绑定原理
<body>
<div id="text"></div>
<input type="text" id="input" />
<script>
var obj = {
}
var newObj = new Proxy(obj, {
get() {
return this
},
// target 目标元素
// property 属性
// val 修改的值
set(target, property, val) {
document.getElementById('text').innerHTML = val
document.getElementById('input').value = val
}
})
newObj.txt = 1
document.getElementById('input').addEventListener('keyup', function (e) {
newObj.txt = e.target.value
})
</script>
</body>
列表渲染的基本使用
<body>
<div id="app">
<h2>1. 遍历普通数组</h2>
<p v-for="(item,index) in list">
{{item}}----{{index}}
</p>
<h2>2. 遍历数组对象</h2>
<p v-for="(item,index) in arrObj">
{{item.name}}----{{index}}
</p>
<h2>3. 遍历对象</h2>
<p v-for="(value,key,index) in obj">
{{key}}----{{value}}---{{index}}
</p>
<h2>4. 遍历数字</h2>
<!-- 遍历数字的时候从1开始到指定的数值 -->
<p v-for="count in 8">
{{count}}
</p>
<!-- list.forEach((item,index)=>{
}) -->
</div>
<script src="./lib/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
list: ['张三', '李四', '王五'],
arrObj: [
{
id: 0,
name: '张三'
},
{
id: 1,
name: '李四'
},
{
id: 2,
name: '王五'
}
],
obj: {
name: '张三',
nickName: '法外狂徒'
}
},
created() {
},
methods: {
}
})
</script>
</body>
key的使用
<body>
v-for为什么跟随key一起使用？
添加key是让每一列保持唯一，防止数据在重新绘制的时候发生错乱
确保model的值和view的值保持一致
<div id="app">
<input type="text" v-model="name">
<input type="button" value="添加" @click="add">
<ul>
<!-- key 使用是唯一的 string/number -->
<li v-for="(item,index) in list" :key="item.name">
<input type="checkbox" name="" id="">
<span>{{item.name}}</span>
</li>
</ul>
</div>
<script src="./lib/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
name: '',
list: [
{
id: 0,
name: 'fly'
},
{
id: 1,
name: 'zan'
},
]
},
methods: {
add() {
this.list.unshift({
id: new Date().getTime(),
name: this.name
})
}
}
})
</script>
</body>
v-show和v-if
<body>
<div id="app">
<!-- <input type="text" v-model="score">
<div v-if="score >= 90">
优秀
</div>
<div v-else-if="score >=80 && score <90">
良好
</div>
<div v-else>
你懂得，加把劲
</div> -->
<button @click="toggle">toggle</button>
<div v-if="flag">
显示隐藏
</div>
<div v-show="flag">
显示隐藏
</div>
使用场景
v-if 一般用于条件渲染
v-if 通过js 添加 删除元素达到显示隐藏的效果
v-show 一般用于频繁点击的时候
v-show 通过 display: none |block 达到元素显示隐藏
</div>
<script src="./lib/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
score: 90,
flag: false
},
created() {
},
methods: {
toggle() {
this.flag = !this.flag
}
}
})
</script>
</body>
了解vue的生命周期
vue-resource
<body>
<div id="app">
<button @click="addTodos">addTodos</button>
<button @click="editTodos">editTodos</button>
</div>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-resource.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
},
created() {
// console.log(this.$http)
this.$http.get('http://127.0.0.1:3000/todos').then(res => {
console.log(res)
})
},
methods: {
addTodos() {
this.$http.post('http://127.0.0.1:3000/todos', {
title: 'ssr',
completed: false,
userId: 1
})
},
editTodos() {
this.$http.put('http://127.0.0.1:3000/todos/2', {
title: 'ssp',
completed: false,
userId: 1
})
}
}
})
</script>
</body>
axios
<body>
<div id="app">
<button @click="getTodos">getTodos</button>
<button @click="addTodos">addTodos</button>
<button @click="editTodos">editTodos</button>
<button @click="deleteTodos">deleteTodos</button>
</div>
<script src="./lib/axios.min.js"></script>
<script src="./lib/vue.js"></script>
<script>
console.log(axios)
new Vue({
el: "#app",
data: {
},
created() {
// this.getTodos()
},
methods: {
getTodos() {
// axios.get('http://127.0.0.1:3000/todos').then(res => {
// console.log(res)
// })
axios.get('http://127.0.0.1:3000/todos?_page=1&_limit=20').then(res => {
console.log(res)
})
},
addTodos() {
axios.post('http://127.0.0.1:3000/todos', {
title: 'ssr',
completed: false,
userId: 1
}).then(res => {
console.log('success')
})
},
editTodos() {
axios.put('http://127.0.0.1:3000/todos/201', {
title: 'ssp',
completed: false,
userId: 1
}).then(res => {
console.log('success')
})
},
deleteTodos() {
axios.delete('http://127.0.0.1:3000/todos/201').then(res => {
console.log('success')
})
}
}
})
</script>
</body>
