01- vue是什么:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><!-- 需求:我在一个input输入框输什么,页面上得p标签就显示什么? -->
<body><!--vue.js是什么：vue就是一个javascript框架，特点：无需再操作dom,只关心数据 --><!-- 原生js做法 --><input type="text" name="" id=""><p>这是一个p标签</p><script>document.querySelector('input').oninput = function () {document.querySelector('p').innerText = this.value}</script><!-- vue做法 --><div id="app"><input type="text" name="" id="" v-model="msg"><p>{{msg}}</p></div><script src="./vue.js"></script><script>var app = new Vue({el: '#app',data: {msg: ''}})</script></body></html>

02- vue的基本使用:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- vue的基本使用1.下载导包,或者使用cdn版本,vue文档都有2.布局,写结构,以前怎么写现在怎么写3.使用vue语法,--><!--2.布局 --><div id="app">{{msg}}-{{message}}<p>{{obj.name}}-{{obj.age}}</p></div><!-- 1.导包 --><script src="./vue.js"></script><!--.3. 使用vue语法 --><script>var app = new Vue({// 挂载点:el实际就是element缩写,相当于一个容器,布局都放在这个容器中// 挂载点一定要是一个正常的元素,不能挂在html跟body上el: '#app', //相当于选择器querySelector// 数据:给的感觉就相当于是一个vue的变量data: {msg: '今天是个好日子',message: 'hello vue',obj: {name: 'yanina',age: 18}}})</script>
</body></html>

03-v-text指令:

!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><!-- v-text指令指令:   就相当于是标签的自定义属性. 指令值: 就相当于是自定义属性的值. v-text指令表示替换的文本,类似于innerText用指令值替换标签中的所有内容. v-text指令值: 一句话表达式a.变量b.基本运算c.三元表达式-->
<body><!--2.布局 --><div id="app"><p v-text="msg">我是一个快乐的p标签<span>哈哈</span></p><p v-text="obj.name"></p><p v-text="1+1"></p><p v-text="obj.age>18?'去网吧':'偷着去'"></p></div><!-- 1.导包 --><script src="./vue.js"></script><!--.3. 使用vue语法 --><script>var app = new Vue({el: '#app',data: {msg: '嘻嘻你今天好美丽呢!',obj: {name: 'yanina',age: 19}}})</script>
</body></html>

ps:打印效果：

04-插值语法:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><!-- {{ 数据 }}数据: 一句话表达式a.变量b.基本运算c.三元表达式使用场景: 用于部分内容的替换. 使用地方: 标签的文本区域-->
<body><!--2.布局 --><div id="app"><p v-text="msg">我是一个快乐的p标签</p><!-- 插值语法不会替换所有的文本 --><p>{{msg}},而且天气也很好</p><p>{{obj.name}}~{{obj.age}},是个美女</p><p>{{1+1}}</p><p>{{obj.age>18?'谈恋爱':'好好学习'}}</p></div><!-- 1.导包 --><script src="./vue.js"></script><!--.3. 使用vue语法 --><script>var app = new Vue({el: '#app',data: {msg: '嘻嘻你今天好美丽呢!',obj: {name: '唐雅莉',age: 19}}})</script>
</body>
</html>

ps:打印效果：

05-v-html指令:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!--v-html指令类似于innerHtml使用场景:富文本(带标签的字符串)的解析会替换标签中的所有内容. 适用于一句话表达式1.变量2.基本运算3.三元表达式--><body><!--2.布局 --><div id="app"><p v-text="msg">我是一个快乐的p标签<span>xixi</span></p><!-- 带标签解析 --><p v-html="msg">我是一个悲伤的p标签<span>haha</span></p><!-- 数值不用加引号 --><p v-html="1+1"></p><!-- 不是数值要加引号 --><p v-html="'<h1>1+1</h1>'"></p></div><!-- 1.导包 --><script src="./vue.js"></script><!--.3. 使用vue语法 --><script>var app = new Vue({el: '#app',data: {msg: '<h1>嘻嘻你今天好美丽呢!</h1>',}})</script>
</body>
</html>

ps:打印效果：

06-v-model指令:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!-- v-model指令使用范围:表单元素(input,radio,select...)使用效果:实现双向绑定,讲表单元素的值(value)和v-model的值合二为一.使用:v-model='变量',不适用一句话表达式,基本运算符跟三元表达式就不行-->
<body><!--2.布局 --><div id="app"><input type="text" v-model="msg"><p>你输入了:{{msg}}</p></div><!-- 1.导包 --><script src="./vue.js"></script><!--.3. 使用vue语法 --><script>var app = new Vue({el: '#app',data: {// msg: '',msg: '商品',}})</script>
</body>
</html>

ps:打印效果：

07-v-model指令-单选框:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id='app'><!-- 单选框:只能选择一组中的某一个 --><label><input type="radio" name="gender" id="" value="男"  v-model="gender">男</label><label><input type="radio" name="gender" id="" value="女"  v-model="gender">女</label><br><p>你选择的性别是:{{gender}}</p></div><script src='./vue.js'></script><script>new Vue({el:'#app',data:{gender:'女'}});</script>
</body>

ps:打印效果：

08 v-model指令-多选框:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id='app'><!-- 多选框 --><input type="checkbox" name="xihuan" value="高" id="" v-model="like">高<input type="checkbox" name="xihuan" value="富" id="" v-model="like">富<input type="checkbox" name="xihuan" value="帅" id="" v-model="like">帅<br><br><p>你喜欢他的是:{{like}}</p></div><script src='./vue.js'></script><script>new Vue({el:'#app',data:{like:['高','帅'] }});</script>
</body>
</html>

ps:打印效果：

09 v-model指令-下拉菜单:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!-- 通过v-model把变量与该input的value的值合二为一 -->
<body><div id='app'><!-- 下拉菜单: 下拉菜单的value值就是选中的option的value值 --><select name="" id="" v-model="address"><option value="Y城" >Y城</option><option value="p城" >p城</option><option value="G港" >G港</option><option value="基地">基地</option></select><br><p>你选择的跳伞城市是: {{address}}</p></div><script src='./vue.js'></script><script>new Vue({el:'#app',data:{address:'p城'}});</script>
</body>
</html>

ps:打印效果：

10 v-on指令:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><!-- v-on指令用来注册事件的. 语法: v-on:事件名="简短的js或者是一个已经写好的function"简短的js可以理解成就是一句话表达式.-->
<body><div id='app'><!-- 事件名:和我们以前写的一样 --><!-- 等号后面可以写 简单js也就是一句话表达式 --><button v-on:click="num++">单击+1</button><button v-on:dblclick="num++">双击+1</button><button v-on:mouseenter="num++">鼠标移入+1</button><!-- 等号后面可以写 一个写好的function --><!-- 已经准备好的方法写在methods里面,methods和data是兄弟关系 --><button v-on:click="say()">调用say方法</button><button v-on:dblclick="say">调用say方法</button> <!-- 如果不需要传递参数,方法调用的阔以省略不写的. --><button v-on:click="sayHello('丫丫')">调用sayHello方法</button><!-- 方法中用data中的数据,用this --><button v-on:click="add">调用add方法让num++</button><br><br><!-- v-on指令简写就是@符号(以上的简写形式,以后也用简写) --><button @click="num++">单击+1</button><button @dblclick="num++">双击+1</button><button @mouseenter="num++">鼠标移入+1</button><button @click="say()">调用say方法</button><button @click="say">调用say方法</button><button @click="sayHello('丫丫')">调用sayHello方法</button><button @click="add">调用add方法让num++</button><p>这里的数量是:{{num}}</p></div><script src='vue.js'></script><script>var app = new Vue({el: '#app',data: {num:0},methods: {say(){alert('你好鸭')},sayHello(name){alert(name+'你好鸭')},add(){//在方法中如何使用data中的数据. 使用this就可以了.  this.num++}}});</script>
</body></html>

ps:打印效果： 点击不同的按钮可以让下面的数量加1,调用不同的方法可以弹出不同的弹出层

11 用v-on指令(做购物车加减案例):

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input {width: 50px;text-align: center;}</style>
</head>
<!-- 分析: 1.input框来一个v-model="值"2.+ 绑定add方法.  让data里面的数据+1 3.- 绑定sub方法.  让data里面的数据-1,判断不能为负数-->
<body><div id='app'><button @click="sub">-</button><input type="text" name="" id="" v-model="inputValue"><button @click="add">+</button><p>你选择的件数是:{{inputValue}}</p></div><script src='vue.js'></script><script>var app = new Vue({el: '#app',data: {inputValue: 0},methods: {sub() {// if (this.inputValue > 0) {//     this.inputValue--// }this.inputValue >0 && this.inputValue--},add() {this.inputValue++}}});</script>
</body></html>

ps:打印效果： 这里点击-按钮与+按钮可以使中间的input数字发生变化,但是不能小于0

12 vue中的this:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id='app'><button @click="add">单击+1</button><p>现在是数字:{{num}}</p></div><script src='vue.js'></script><script>//调用Vue的构造函数,得到一个Vue的实例var app = new Vue({el: '#app',data: {num: 0},methods: {add() {this.num++;//this.$data.num++;// this就是vue实例// data和methods都没有在vue实例里// 真正是把data里面的数据和methods里面的方法直接平铺到了vue实例里console.log(this);console.log(app);console.log(this == app); //truethis.test()},test() {alert('我是test方法')}}});</script>
</body>
</html>

13 搜索英雄人物demo案例:

<!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>* {margin: 0;padding: 0;}.search {text-align: center;padding: 30px 0;}.search input {width: 300px;padding: 10px 6px;}.search button {width: 80px;height: 40px;}.info {width: 400px;margin: 0 auto;}.info .story {padding-top: 15px;text-indent: 2em;}
</style><body><div id="app"><div class="search"><input type="text" placeholder="请输入王者名称" v-model="heroValue" @keyup.enter="search"><button @click="search">搜索</button></div><div class="info"><h4>姓名：{{heroList[heroIndex].name}}</h4><div class="story">英雄故事:{{heroList[heroIndex].story}}</div><!-- <img :src=heroList[heroIndex].img[0] alt="" style="width: 500px;"> --></div></div>
<!-- 分析: 1.打开有一个默认的数据显示a.input文本输入框  v-model="值"  值="塞拉斯"b.名字  {{heroList[0].name}}c.故事  {{heroList[0].story}}2.搜索功能a.按钮设置点击事件  @click="搜索事件"b.搜索事件里面如何写: b1:遍历数据数组b2:indexOf去判断每一个数据的name里面包含不包含 用户输入的关键字 . b3:如果找到了就返回该数据的下标. 那上面显示名字和故事的地方,就不用0, 就用这个获取到的下标. --><script src="./vue.js"></script><script>new Vue({el: "#app",data: {heroValue: '塞拉斯',heroIndex: 0,//英雄数据heroList: [{"name": "塞拉斯","story": "作为一个出生于德玛西亚穷苦家庭的法师，虽然当时塞拉斯还只是一个少年，搜魔人还是将他终身监禁。他使用偷来的魔法杀害了场上所有人，除了饱受惊吓的拉克丝。塞拉斯不是以逃犯的身份离开搜魔人监狱，而是成为了法师反抗的代表。","img": ["http://ossweb-img.qq.com/images/lol/web201310/skin/big517000.jpg","http://ossweb-img.qq.com/images/lol/web201310/skin/big517001.jpg"],}, {"name": "妮蔻","story": "妮蔻来自一个早已迷失的瓦斯塔亚部落。她可以借用别人的外表来伪装自己，融入人群，甚至通过影响别人的情绪状态，一瞬间就能化敌为友。没人知道妮蔻到底在哪儿——或者到底是谁，但是想要为难她的人会立刻见识到她的本色，感受原始的精神魔法倾泻在自己身上的痛苦。","img": ["http://ossweb-img.qq.com/images/lol/web201310/skin/big518000.jpg","http://ossweb-img.qq.com/images/lol/web201310/skin/big518001.jpg"],}, {"name": "派克","story": "在比尔吉沃特的屠宰码头，颇有名气的鱼叉手派克葬身在一条巨大的琢珥鱼腹内……然而，他却回来了。他在家乡的阴街陋巷中徘徊着，用超自然的手段干脆残忍地解决那些鱼肉他人的恶棍——一座因捕猎怪物而自豪的城市如今发觉自己却成了狩猎的目标。","img": ["http://ossweb-img.qq.com/images/lol/web201310/skin/big555000.jpg","http://ossweb-img.qq.com/images/lol/web201310/skin/big555001.jpg","http://ossweb-img.qq.com/images/lol/web201310/skin/big555009.jpg"],}, {"name": "卡莎","story": "在孩童时期就被虚空夺走的卡莎，凭着纯粹的固执和意志力活了下来。她的历练让她成为了一位夺命的猎手，或者也有人会称她为黑暗未来的使者。她与一副有生命的虚空生物甲壳形成了一种不得安宁的共生状态，而很快她就将面临一个重大的抉择，究竟是原谅那些称她为怪物的凡人并协力抵御压境的黑暗……还是干脆忘记，放任虚空吞噬这个已将她抛弃的世界。","img": ["http://ossweb-img.qq.com/images/lol/web201310/skin/big145000.jpg","http://ossweb-img.qq.com/images/lol/web201310/skin/big145001.jpg","http://ossweb-img.qq.com/images/lol/web201310/skin/big145014.jpg","http://ossweb-img.qq.com/images/lol/web201310/skin/big145015.jpg","http://ossweb-img.qq.com/images/lol/web201310/skin/big145016.jpg","http://ossweb-img.qq.com/images/lol/web201310/skin/big145017.jpg"],}],},methods: {search() {//这个方法就是遍历上面的heroList数组,拿到搜索词所在的那个下标for (let i = 0; i < this.heroList.length; i++) {// 判断搜索的关键词在不在数组的属性name中if (this.heroList[i].name.indexOf(this.heroValue) != -1) {this.heroIndex = i;return;}}}},})</script>
</body></html>

ps:打印效果： 这是还没搜索的状态下默认是塞拉斯
ps:打印效果： 搜索一个卡字可以直接enter键也可以点搜索按钮出现对应的英雄以及英雄故事

14 v-on常用的修饰符:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 300px;height: 300px;background-color: seagreen;}.son {width: 150px;height: 150px;background-color: pink;}</style>
</head><body><div id='app'><!-- 1.希望按下回车后执行(按键修饰符.enter 可以是键码或者英文+--><input type="text" name="" id="" @keyup.enter="fun"><br><br><!-- 2.希望不要冒泡 (事件修饰符 .stop 阻止单击事件继续传播) --><div class="father" @click="clickFather"><div class="son" @click.stop="clickSon"></div><!-- 3.希望不要有默认行为 .prevent --><!-- 下面这种事既不要有默认行为又不要冒泡的 --><a href="http://www.baidu.com" @click.prevent.stop="clickA">我是a链接</a></div><!-- 工作中用的多的:.enter   回车触发.stop    阻止冒泡.prevent 阻止默认行为--></div><script src='vue.js'></script><script>var app = new Vue({el: '#app',data: {},methods: {fun() {console.log('嘻嘻哈哈');},clickFather() {alert("我是爸爸");},clickSon() {alert("我是儿子");},clickA() {alert("我是a链接,我被点击了");}}});</script>
</body></html>

ps:打印效果：
在input表单中按下回车enter会打印"嘻嘻哈哈",
点击红色盒子弹出"我是儿子",不会冒泡弹出"我是爸爸"(阻止了冒泡)
点击a链接弹出"我是a链接,我被点击了" 不会跳转到百度页面也不会冒泡弹出"我是爸爸"(阻止了冒泡并阻止了默认跳转)

15 v-bind的基本使用:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- v-bind指令用于属性的绑定. 后面的值就是该属性的值. 用法: v-bind:属性名="属性值(一句话表达式)"1.变量  2.基本运算  3.三元表达式-->
</head><body><div id='app'><button @click="btnClick">点我换图片</button><br><img v-bind:src="imgSrc" v-bind:title="imgTitle" v-bind:score="imgScore" alt=""> <!-- 原始写法 --><img :src="imgSrc" :title="imgTitle" :score="imgScore"  alt=""> <!-- 简写 --></div><script src='vue.js'></script><script>var app = new Vue({el:'#app',data:{imgSrc:"http://ossweb-img.qq.com/images/lol/web201310/skin/big517000.jpg",imgTitle:'这是一张图片',imgScore:'123',},methods: {btnClick(){this.imgSrc = "http://ossweb-img.qq.com/images/lol/web201310/skin/big555000.jpg";this.imgTitle = '这是一张美丽的图片',this.imgScore = '456'}},});</script>
</body>
</html>

ps:打印效果： 没点击按钮之前
ps:打印效果： 点击按钮之后,换图片地址,图片标题,还有自定义的score属性

01-vue(v-text,插值语法,v-html,v-model,v-on,v-bind,vue中的this,事件按键修饰符)相关推荐

vue 事件修饰符按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求. .stop 阻止单击事件传播即阻止了事件冒泡, ...
五、伊森商城前端基础-Vue v-on 事件修饰符按键修饰符 v-for v-if 和v-show v-else和v-else-if p24
目录 1.v-on 2.事件修饰符 3.按键修饰符 3.1.组合按钮 4.v-for 5.v-if和v-show 6.v-else 和 v-else-if 6.1.v-if结合v-for来时用 1.v ...
22. Vue keycodes按键修饰符
需求在业务开发中,例如:用户登录添加用户名和密码之后,按下回车键完成登录,这个操作就需要绑定按键的keyup事件,并且还要使用按键修饰符来指定按下的键盘按钮. 下面来看看另一个需求来逐步认识一下按钮 ...
Vue 自定义按键修饰符对应表
Vue 自定义按键修饰符对应表按键键码 8 BackSpace 9 Tab 12 Clear 13 Enter 16 Shift 17 Ctrl 18 Alt 19 Pause 20 Caps_L ...
Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
1.绑定监听@click: (以监听click为例,其他如keyup,用法类似) v-on:click="fun" @click="fun" @cli ...
我的 Vue.js 学习日记（七） - 事件与修饰符
上节回顾上节写了一个v-for与table的简单互动,脑子里回忆一下,嗯 ~ 还是回去再看一遍吧... 本节目标今天看一下事件与修饰符,并且把有疑惑的地方敲一遍,亲眼看一下输出结果.由于时间有限, ...
第二章 Vue快速入门-- 28 自定义按键修饰符
事件处理-按键修饰符 js 里面的键盘事件对应的键码 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head&g ...
vue与elementUI中给el-input绑定键盘按键--按键修饰符
vue怎么写键盘事件 vue允许将按键值作为修饰符来使用,如监听回车事件,有两种写法,如下代码: <input type="text" @keyup.13="con ...
Vue按键修饰符：@keyup.enter
事件keyup是按键抬起事件,就是当按键抬起触发: keyup后面加上按键修饰符可以指定抬起某个按键再触发事件: 每一个按键都有一个keyCode,比如"Enter"回车键的key ...

01-vue(v-text,插值语法,v-html,v-model,v-on,v-bind,vue中的this,事件按键修饰符)

01- vue是什么:

02- vue的基本使用:

03-v-text指令:

04-插值语法:

05-v-html指令:

06-v-model指令:

07-v-model指令-单选框:

08 v-model指令-多选框:

09 v-model指令-下拉菜单:

10 v-on指令:

11 用v-on指令(做购物车加减案例):

12 vue中的this:

13 搜索英雄人物demo案例:

14 v-on常用的修饰符:

15 v-bind的基本使用:

01-vue(v-text,插值语法,v-html,v-model,v-on,v-bind,vue中的this,事件按键修饰符)相关推荐

最新文章

热门文章