01初识Vue
1、vue的使用
1.1 vue2的官网
https://v2.cn.vuejs.org/v2/api/#productionTip
1.2 使用vue
// 引入在线资源
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
// 下载版本vue引入
https://v2.cn.vuejs.org/v2/guide/installation.html
1.3 创建vue
<script>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
// 创建vue实例
const x = new Vue({
el: ".root", // 找到盒子容器
data: { // 创建数据
name: "哈哈哈"
}
})
new Vue({
el: "#app",
data: {
name: "我是插值方式",
url: "http://www.baidu.com",
bd: "hemc"
}
})
</script>
el 和 data 的两种写法
<div id="root">
<h3>你好,{{name}}</h3>
</div>
<script>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
// el 的两种写法
const v = new Vue({
// el: "#root", 第一种写法
data: {
name: "Jack"
}
})
console.log(v);
v.$mount("#root") //第二种写法
/************************************************************/
// data 两种写法
new Vue({
el: "#root",
// 第一种写法 对象式
/* data: {
name: "data写法"
}
*/
data: function () {
console.log(this);
return {
name: "data第二种"
}
}
})
</script>
创建Vue只能一一对应，一个容器对应一个实例
data与el的2种写法
1. el有2种写法
(1). new Vue时候配置e1属性。
(2).先创建Vue实例，随后再通过vm。$mount( ‘ #root ‘ )指定e1的值。
2. data有2种写法
(1).对象式
(2).函数式
如何选择:目 前哪种写法都可以，以后学习到组件时，data必 须使用函数式，否则会报错。
3.一个重要的原则:
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了.
1.4 插值语法
<div class="root">
<p>我的名字是 ：{{name}}</p>
</div>
<div class="root">
<em>这是第二个：{{name}}</em> <!-- 只能解析第一个 第二个得重新创建vue -->
</div>
1.5 指令语法
<div id="app">
<h2>插值语法</h2>
<h3>{{name}}</h3>
<hr>
<h2>指令语法</h2>
<a v-bind:href="url" v-bind:mo="bd">点我跳转百度</a> <!-- 绑定 v-bind -->
<a :href="url" v-bind:mo="bd">点我跳转百度</a> <!-- 绑定 v-bind 可以简写 ： -->
</div>
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
2.root容器里的代码依然符合htm1规范，只不过混入了-些特殊的Vue语法;
3. root容器里的代码被称为[Vue模板] ;
4.Vue实例和容器是一一对 应的;
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用;
6 {{Cxx}}中的xxx要写js表达式，且xxx可 以自动读取到data中的所有属性:
7.只要data中的数据发生改变，那么模板中用到该数据的地方也会自动更新;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<div v-cloak>{{msg}}</div> <!-- 刷新的时候不会闪动 -->
<div v-text='text'></div> <!-- 直接显示文本 可以解觉刷新闪动的问题 -->
<div v-html="msg1"></div> <!-- 解析h5标签 -->
<div v-pre>{{msg}}</div> <!-- 按照原模板显示 -->
<div v-once>{{msg2}}</div> <!-- 只编译一次 不再具有响应式 应用场景 如果显示的信息后续不需要在修改了,可以使用 v-once 这样可以提高性能 -->
<!-- 双向数据绑定 -->
<div>
<div>{{msg3}}</div>
<input type="text" v-model="msg3"> <!-- 双向数据绑定 修改input值上面的 div 也跟着变化-->
</div>
<!-- MVVM 设计思想 -->
<!-- 事件绑定 -->
<div>{{num}}</div>
<button v-on:click="num++">点击num值++</button><!-- v-on 指令用法 简写方式 @click = 'num++' -->
<button @click='num++'>简写加</button> <!-- 开发方便点 -->
<!-- 两种调用函数方法 可以带括号也可以不用带-->
<button @click="handle">点击调用函数1</button>
<button @click="handle()">点击调用函数1</button>
<!-- 事件函数参数传递 -->
<button @click="rest(123,456,$event)">参数调用函数</button> <!-- 事件对象 固定写法 $event -->
<!-- 事件修饰符 阻止事件的冒泡-->
<div @click="shijia">
<button @click.stop="handle">shijia 里面的</button><!-- .stop 阻止冒泡 -->
</div>
<!-- 阻止默认行为 -->
<div>
<a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度1</a>
<a href="http://www.baidu.com" @click.prevent='handle2'>百度简写</a>
<a href="http://www.baidu.com" @click.stop.prevent='handle2'>百度串联写法</a>
</div>
</div>
<script src=" ../vue.min.js"></script>
<script>
var vm = new Vue({ /* 创建vue模板 */
el: "#app", /* 获取元素 */
data: { /* 创建数据 */
msg: "这里是内容",
text: "这是第二个",
msg1: '<h1>html</h1>',
msg2: 'hellow word',
msg3: '双向数据绑定',
num: 0
},
methods: { /* 专门创建函数地方 */
handle: function (event) {
// 阻止冒泡
// event.stopPropagation(); /* 自定义函数 */
// console.log(this);/* 这是vue 的实例对象 */
this.num++;
},
rest: function (p, q, event) {
console.log(p, q);
console.log(event.target.tagName);
console.log(event.target.innerHTML); //显示事件对象里面的内容
},
shijia: function () {
console.log('大盒子被触发了');
},
handle2: function (event) {
// 阻止默认行为
// event.preventDefault(); js写法
}
}
})
</script>
</body>
</html>
总结
- 插值和指令
1.插值语法行
功能:用于解析标签体内容。
写法: {{xxx}}, xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....) 。
举例: v-bind:href="xx" 或简写为 ;href="xxx", xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注: Vue中有很多的指令，且形式都是：v-???,此处我们只是拿 v-bind举例子
- vue 相同变量用增加对象第二层
new Vue({
el: "#app",
data: {
name: "我是插值方式",
url: "http://www.baidu.com",
bd: "123",
text: "我是生成的",
school: {
name: "我是第二层的name"
}
}
})
2、数据绑定
2.1 单向绑定和双向绑定
单向数据绑定 v-bind 简写 ：xxx
双向数据绑定 v-model：value 简写 v-model
<div id="root">
<!-- 普通写法 -->
单向数据绑定：<input type="text" v-bind:value="name"><br>
双向数据绑定：<input type="text" v-model:value="name"><br>
<!-- 简写方式 -->
单向数据绑定：<input type="text" :value="name"><br>
双向数据绑定：<input type="text" v-model="name"><br>
<!-- 因为v-model只能应用在表单类元素上(输入类元素)
-->
<h2 v-model:x="name">这会报错</h2>
</div>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
new Vue({
el: "#root",
data: {
name: "学习了"
}
})
Vue中有2种数据绑定的方式
1.单向绑定(v-bind):数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data.
备注:
1.双向绑定般都应用在表单类元素 上(如: input、 select等 )
2.v-model:value可以简写为v-model, 因为v- mode1默认收集的就是value值.
3、MVVM 模型
3. 模型解释
- M：模型（Model）：对应data中的数据
- V：视图（View）：模板
- VM：视图模型（ViewModel）：Vue实例对象
MVVM模型
- M: 模型(Model) : data中的数据
- V:视图(View) :模板代码
- VM: 视图模型(ViewModel): Vue实例
观察发现:- data中所有的属性，最后都出现在了vm身上。
2.vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。
4、数据代理
let person = {
name: "张三",
sex: "男"
}
Object.defineProperty(person, 'age', {
value: 18
})
console.log(person);
5、按键修饰符
.enter回车键提交表单
<input type="text" v-model="pwd" v-on:keyup.enter="sub"> <!-- enter键提交表单 -->
.delete删除键清空内容
<input type="text" v-model="unmae" v-on:keyup.delete='clearContent'><!-- 按delete键清除内容 -->
- 自定义按键修饰符 ， 全局
config.keyCodes
Vue.config.keyCodes.f1=12
案例
<div id="app">
<form action="">
<div>
用户名：
<input type="text" v-model="unmae" v-on:keyup.delete='clearContent'><!-- 按delete键清除内容 -->
</div>
<div>
密码：
<input type="text" v-model="pwd" v-on:keyup.enter="sub"> <!-- enter键提交表单 -->
</div>
<div>
<input type="button" value="提交" @click="sub">
</div>
<!-- 自定义修饰符 -->
<div>
<input type="text" v-on:keyup="handle" v-model="info">
<input type="text" v-on:keyup.65="handle" v-model="info"><!-- 只有按键a时才有反应 -->
<input type="text" v-on:keyup.zdy="handle" v-model="info">
</div>
</form>
</div>
常用的按键修饰符
.enter => enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) => 删除键
.esc => 取消键
.space => 空格键
.up => 上
.down => 下
.left => 左
.right => 右
<script>
//事件绑定按键修饰符
//规则：自定义修饰符名字是自定义的，但是对应的值必须是按键对应enter
Vue.config.keyCodes.zdy = 65
let vm = new Vue({
el: "#app",
data: {
unmae: '',
pwd: '',
info: ''
},
methods: {
sub: function () {
console.log('提交');
console.log(this.unmae, this.pwd);
},
clearContent: function () {
this.unmae = ''
},
handle: function (event) {
console.log(event.keyCode);
}
}
})
</script>
6、简易计算器制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易计算器</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
<div id="scale">
<h3>简易加法计算器</h3>
<p>第一个数：<input type="text" v-model="one"></p>
<p>第二个数：<input type="text" v-model="two"></p>
<button @click="start">计算</button>
<p>计算结果等于：</p><span v-text="res"></span>
</div>
<script>
let vm = new Vue({
el: "#scale",
data: {
one: '',
two: '',
res: ''
},
methods: {
start: function () {
this.res = Number(this.one) + Number(this.two);
}
}
})
</script>
</body>
</html>
7、绑定属性
- v-bind指令用法
<a v-bind:href='url'>跳转</a>
- 缩写形式
<a :href='url'>跳转</a>
-
绑定对象
- 我们可以给v-bind:class 一个对象，以动态地切换class。
- 注意：v-bind:class指令可以与普通的class特性共存
1、 v-bind 中支持绑定一个对象 如果绑定的是一个对象 则 键为 对应的类名 值 为对应data中的数据 <!-- HTML最终渲染为 <ul class="box textColor textSize"></ul> 注意： textColor，textSize 对应的渲染到页面上的CSS类名 isColor，isSize 对应vue data中的数据 如果为true 则对应的类名 渲染到页面上 当 isColor 和 isSize 变化时，class列表将相应的更新， 例如，将isSize改成false， class列表将变为 <ul class="box textColor"></ul> --> <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}"> <li>学习Vue</li> <li>学习Node</li> <li>学习React</li> </ul> <div v-bind:style="{color:activeColor,fontSize:activeSize}">对象语法</div> <sript> var vm= new Vue({ el:'.box', data:{ isColor:true, isSize:true， activeColor:"red", activeSize:"25px", } }) </sript> <style> .box{ border:1px dashed #f0f; } .textColor{ color:#f00; background-color:#eef; } .textSize{ font-size:30px; font-weight:bold; } </style>- 绑定class
2、 v-bind 中支持绑定一个数组 数组中classA和 classB 对应为data中的数据 这里的classA 对用data 中的 classA 这里的classB 对用data 中的 classB <ul class="box" :class="[classA, classB]"> <li>学习Vue</li> <li>学习Node</li> <li>学习React</li> </ul> <script> var vm= new Vue({ el:'.box', data:{ classA:‘textColor‘, classB:‘textSize‘ } }) </script> <style> .box{ border:1px dashed #f0f; } .textColor{ color:#f00; background-color:#eef; } .textSize{ font-size:30px; font-weight:bold; } </style>- 绑定对象和绑定数组的区别
- 绑定对象的时候的属性 即要渲染的类名 对象的属性值对应的是data中的数据
- 绑定数组的时候数组里面存的是data中的数据
8、条件渲染
v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。v-else-if，顾名思义，充当v-if的“else-if 块”，可以连续使用：- 可以使用
v-else指令来表示v-if的“else 块”：
v-if:true
v-if:false类似于
v-else，v-else-if也必须紧跟在带v-if或者v-else-if的元素之后。
<div id="app">
<p v-if="isSee">你看不到我</p>
<p v-if="isSee2">你看到我了</p>
<!-- 多选一 v-if v-else-if v-else 三个必须连在一起,中间不能有其他标签-->
<p v-if="true">456</p>
<p v-else-if="false">123</p>
<p v-else>789</p>
<!-- v-show -->
<p v-show="true">我要被隐藏</p>
<p v-show="false">你要被隐藏</p>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
isSee: true,
isSee2: false
}
})
</script>
9、列表渲染
v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。
循环结构-遍历数组
item 是我们自己定义的一个名字 代表数组里面的每一项
items对应的是 data中的数组
<div id="app">
<table>
<tr v-for="(item,index) in student" :key="index" :class="{index%2==0?'back':''"><!-- :class="[index%2==0?'back':'']" -->
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
</tr>
</table>
<div class="box">
<li v-for="item in 10">
{{item}}</li>
</div>
</div>
</body>
<script>
//创建mvvm的 vm实例， (Vue对象)
let app = new Vue({
el: "#app",
data: {
student: [
{ name: "张三", age: 18, sex: "男" },
{ name: "李四", age: 20, sex: "女" },
{ name: "王五", age: 18, sex: "男" },
{ name: "小二", age: 36, sex: "女" },
{ name: "哈哈", age: 45, sex: "男" },
]
}
})
</script>
- 用
v-for来遍历一个对象的 property
//第一个参数是对象值，第二个是对象键名，第三个是key索引
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
在遍历对象时，会按
Object.keys()的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。
- 不推荐同时使用
v-if和v-for - 当
v-if与v-for一起使用时，v-for具有比v-if更高的优先级。
10、template模板
<div id="app">
<template v-for="(item,index) in cars" :key="index">
<h1>{{item.name}}</h1>
<p>{{item.price}}</p>
</template>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
cars: [
{ name: "奔驰", price: '50w' },
{ name: "拖拉机", price: '50w' },
{ name: "丰田", price: '50w' },
{ name: "领克", price: '50w' },
{ name: "越野", price: '50w' },
{ name: "Jeep", price: '50w' },
]
}
})
</script>
11、隔行变色
<tr v-for="(item,index) in student" :key="index" :class="{index%2==0?'back':''">
<!-- :class="[index%2==0?'back':'']" -->
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
12、案例选项卡
1、 HTML 结构
`
<div id="app">
<div class="tab">
<!-- tab栏 -->
<ul>
<li class="active">apple</li>
<li class="">orange</li>
<li class="">lemon</li>
</ul>
<!-- 对应显示的图片 -->
<div class="current"><img src="img/apple.png"></div>
<div class=""><img src="img/orange.png"></div>
<div class=""><img src="img/lemon.png"></div>
</div>
</div>
`
2、 提供的数据
list: [{
id: 1,
title: 'apple',
path: 'img/apple.png'
}, {
id: 2,
title: 'orange',
path: 'img/orange.png'
}, {
id: 3,
title: 'lemon',
path: 'img/lemon.png'
}]
3、 把数据渲染到页面
-
把tab栏 中的数替换到页面上
- 把 data 中 title 利用 v-for 循环渲染到页面上
- 把 data 中 path利用 v-for 循环渲染到页面上
<div id="app"> <div class="tab"> <ul> <!-- 1、绑定key的作用 提高Vue的性能 2、 key 需要是唯一的标识 所以需要使用id， 也可以使用index ， index 也是唯一的 3、 item 是 数组中对应的每一项 4、 index 是 每一项的 索引 --> <li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li> </ul> <div :key='item.id' v-for='(item, index) in list'> <!-- : 是 v-bind 的简写 绑定属性使用 v-bind --> <img :src="item.path"> </div> </div> </div> <script> new Vue({ // 指定 操作元素 是 id 为app 的 el: '#app', data: { list: [{ id: 1, title: 'apple', path: 'img/apple.png' }, { id: 2, title: 'orange', path: 'img/orange.png' }, { id: 3, title: 'lemon', path: 'img/lemon.png' }] } }) </script>
4、 给每一个tab栏添加事件,并让选中的高亮
-
4.1 、让默认的第一项tab栏高亮
- tab栏高亮 通过添加类名active 来实现 （CSS active 的样式已经提前写好）
- 在data 中定义一个 默认的 索引 currentIndex 为 0
- 给第一个li 添加 active 的类名
- 通过动态绑定class 来实现 第一个li 的索引为 0 和 currentIndex 的值刚好相等
- currentIndex === index 如果相等 则添加类名 active 否则 添加 空类名
- tab栏高亮 通过添加类名active 来实现 （CSS active 的样式已经提前写好）
-
4.2 、让默认的第一项tab栏对应的div 显示
- 实现思路 和 第一个 tab 实现思路一样 只不过 这里控制第一个div 显示的类名是 current
<ul> <!-- 动态绑定class 有 active 类名高亮 无 active 不高亮--> <li :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list' >{{item.title}}</li> </ul> <!-- 动态绑定class 有 current 类名显示 无 current 隐藏--> <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'> <!-- : 是 v-bind 的简写 绑定属性使用 v-bind --> <img :src="item.path"> </div> <script> new Vue({ el: '#app', data: { currentIndex: 0, // 选项卡当前的索引 默认为 0 list: [{ id: 1, title: 'apple', path: 'img/apple.png' }, { id: 2, title: 'orange', path: 'img/orange.png' }, { id: 3, title: 'lemon', path: 'img/lemon.png' }] } }) </script> -
4.3 、点击每一个tab栏 当前的高亮 其他的取消高亮
-
给每一个li添加点击事件
-
让当前的索引 index 和 当前 currentIndex 的 值 进项比较
-
如果相等 则当前li 添加active 类名 当前的 li 高亮 当前对应索引的 div 添加 current 当前div 显示 其他隐藏
<div id="app"> <div class="tab"> <ul> <!-- 通过v-on 添加点击事件 需要把当前li 的索引传过去 --> <li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li> </ul> <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'> <img :src="item.path"> </div> </div> </div> <script> new Vue({ el: '#app', data: { currentIndex: 0, // 选项卡当前的索引 默认为 0 list: [{ id: 1, title: 'apple', path: 'img/apple.png' }, { id: 2, title: 'orange', path: 'img/orange.png' }, { id: 3, title: 'lemon', path: 'img/lemon.png' }] }, methods: { change: function(index) { // 通过传入过来的索引来让当前的 currentIndex 和点击的index 值 相等 // 从而实现 控制类名 this.currentIndex = index; } } }) </script>
-
原文地址：http://www.cnblogs.com/daixiaoyang/p/16869482.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
