vue.js快速入门- Starterknow

el:挂载点

Vue实例的作用范围是什么呢？

Vue会管理el选项
命中的元素
及其内部的
后代元素

是否可以使用其他的选择器？

可以使用其他的选择器,但是建议使用
ID选择器

是否可以设置其他的dom元素呢？

可以使用其他的双标签,不能使用
HTML
和
BODY

<!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>el:挂载点</title></head><body id=”body”>{{ message }}<h2 id=”APP” class=”app”> {{ message }} <span> {{ message }} </span></h2><!– 开发环境版本，包含了有帮助的命令行警告 –><script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script><script> var app = new Vue({ // el:”#app”, // el:”.app”, // el:”div”, el:”#body”, data:{ message:”黑马程序员” } })</script></body></html>

data:数据对象

Vue中用到的数据定义在
data
中

data中可以写
复杂类型
的数据

渲染复杂类型数据时,遵守js的
语法
即可

<div id=”app”> {{ message }} </div>var app = new Vue({          el:”#app”,                      data:{             message:”黑马程序员”,          array:[],          obj:{},                      }       })
Vue指令
指的是,以
v-
开头的一组特殊语法

v-text

v-text
指令的作用是:设置标签的内容(textContent)

默认写法会替换全部内容,使用
差值表达式{{}}
可以替换指定内容

内部支持写
表达式

<div id=”app”>       <h2 v-text=”message+’!’”></h2>       <h2>深圳{{ message + “!”}}</h2>       </div>var app = new Vue({    el:”#app”,                data:{             message:”黑马程序员”          }       })
v-html

v-html
指令的作用是:设置元素的
innerHTML

内容中有
html
结构会被解析为
标签

v-text
指令无论内容是什么,只会解析为
文本

解析文本使用
v-text
,需要解析
html
结构使用
v-html

<div id=”app”>       <p v-html=“content”></p>       </div> var app = new Vue({          el:”#app”,                   data:{             // content:”黑马程序员”             content:”<a href=’#’>黑马程序员</a>”          }       })
v-on基础

v-on
指令的作用是:为元素绑定
事件

事件名不需要写
on

指令可以简写为
@

绑定的方法定义在
methods
属性中

方法内部通过
this
关键字可以访问定义在
data
中数据

事件绑定的方法写成
函数调用
的形式，可以传入自定义参数

定义方法时需要定义
形参
来接收传入的实参

事件的后面跟上
.修饰符
可以对事件进行限制

v-on补充

.enter
可以限制触发的按键为回车

事件修饰符有多种

<div id=”app”>       <input type=”button” value=”事件绑定” v-on:click=“doIt”>       <input type=”button” value=”事件绑定” v-on:monseenter=“doIt”>       <input type=”button” value=”事件绑定” v-on:dblclick=“doIt”>       <input type=”button” value=”事件绑定” @dblclick=“doIt”>       </div> var app = new Vue({          el:”#app”,                      methods:{          doIt:functiоn(){             // 逻辑             }          }       })<div class=”input-num”>          <button @click=“sub”>-</button>          <span>{{ num }}</span>          <button @click=“add”>+</button> </div><!– 开发环境版本，包含了有帮助的命令行警告 –><script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script><!– 编码 –><script> /*    1. data中定义num属性,类型是数字,渲染到2个按钮中间    2. 减号绑定点击事件,对应的方法名叫sub,大于0之前递减    3. 加号绑定点击事件,对应的方法名叫add,小于0之前累加 */ // 创建Vue实例 var app = new Vue({       el: “#app”,       data: {          // 修改的数字          num:1       },       methods: {          // 减          sub:functiоn(){             // console.log(“sub”);             // 递减             if(this.num>0){                   this.num–;             }else{                   alert(“别点啦,太小啦!”);             }          },          // 加          add:functiоn(){             // console.log(“add”);             // 累加             if(this.num<10){                   this.num++;             }else{                   alert(“别点啦,太大啦!”);             }          }       } });</script><body><div id=”app”> <input type=”button” value=”点击” @click=”doIt(666,’老铁’)”> <input type=”text” @keyup.enter=”sayHi”></div><!– 1.开发环境版本，包含了有帮助的命令行警告 –><script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script><script> var app = new Vue({       el:”#app”,       methods: {          doIt:functiоn(p1,p2){             console.log(“做it”);             console.log(p1);             console.log(p2);          },          sayHi:functiоn(){             alert(“吃了没”);          }       }, })</script></body>
v-show

v-show
指令的作用是:根据真假切换元素的显示状态

原理是修改元素的display,实现显示隐藏

指令后面的内容,最终都会解析为
布尔值

值为
true
元素显示,值为
false
元素隐藏

数据改变之后,对应元素的显示状态会
同步更新

<body><div id=”app”> <input type=”button” value=”切换显示状态” @click=”changeIsShow”> <input type=”button” value=”累加年龄” @click=”addAge”> <img v-show=”isShow” src=”./img/monkey.gif” alt=””> </div><!– 1.开发环境版本，包含了有帮助的命令行警告 –><script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script><script> var app = new Vue({       el:”#app”,       data:{          isShow:false,          age:9       },       methods: {          changeIsShow:functiоn(){             this.isShow = !this.isShow;          },          addAge:functiоn(){             this.age++;          }       }, })</script></body>
v-if

根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)

频繁的切换
v-show
,反之使用
v-if
,前者的切换消耗小

本质是通过操纵
dom
元素来切换显示状态

表达式的值为
true
,元素存在于
dom
树中,为
false
,从
dom
树中移除

<body><div id=”app”> <input type=”button” value=”切换显示” @click=”toggleIsShow”> <p v-if=”isShow”>黑马程序员</p> <p v-show=”isShow”>黑马程序员 – v-show修饰</p> <h2 v-if=”temperature>=35″>热死啦</h2></div><!– 开发环境版本，包含了有帮助的命令行警告 –><script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script><script> var app = new Vue({       el:”#app”,       data:{          isShow:false,          temperature:36       },       methods: {          toggleIsShow:functiоn(){             this.isShow = !this.isShow;          }       }, })</script></body>
v-bind

设置元素的属性(比如:
src
,
title
,
class
)

v-bind
指令的作用是:为元素绑定属性

完整写法是
v-bind:属性名

简写的话可以直接省略
v-bind
,只保留
:属性名

需要动态的增删
class
建议使用对象的方式

<body><div id=”app”> <img v-bind:src=”imgSrc” alt=””> <br>       <br> </div><!– 开发环境版本，包含了有帮助的命令行警告 –><script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script><script> var app = new Vue({       el:”#app”,       data:{          imgSrc:”http://www.itheima.com/images/logo.png”,          imgTitle:”黑马程序员”,          isActive:false       },       methods: {          toggleActive:functiоn(){             this.isActive = !this.isActive;          }       }, })</script></body>
图片切换实例

<body><div id=”mask”> <div class=”center”>       <h2 class=”title”><img src=”./images/logo.png” alt=””> 深圳创维校区环境</h2>       <img :src=”imgList[index]” alt=”” />       <a             href=”javascript:void(0)”             @click=”prev”             class=”left”             v-show=”index>0″       >          <img src=”./images/prev.png” alt=”” />       </a>       <a             href=”javascript:void(0)”             @click=”next”             class=”right”             v-show=”index<imgList.length-1″       >          <img src=”./images/next.png” alt=”” />       </a> </div></div><script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script><script> const app = new Vue({       el: “#mask”,       data: {          imgList: [             “./images/00.jpg”,             “./images/01.jpg”,             “./images/02.jpg”,             “./images/03.jpg”,             “./images/04.jpg”,             “./images/05.jpg”,             “./images/06.jpg”,             “./images/07.jpg”,             “./images/08.jpg”,             “./images/09.jpg”,             “./images/10.jpg”,          ],          index: 0       },       methods: {          // 上一张          prev() {             this.index–;          },          // 下一张          next() {             this.index++;          }       } });</script></body>
v-for

根据数据生成列表结构

v-for
指令的作用是:根据数据生成列表结构

数组经常和
v-for
结合使用，
语法是
( item,index ) in 数据

item 和 index 可以结合其他指令一起使用

数组长度的更新会同步到页面上,是响应式的

<body><div id=”app”> <input type=”button” value=”添加数据” @click=”add”> <input type=”button” value=”移除数据” @click=”remove”> <ul>       <li v-for=”(it,index) in arr”>          {{ index+1 }}黑马程序员校区:{{ it }}       </li> </ul> <h2 v-for=”item in vegetables” v-bind:title=”item.name”>       {{ item.name }} </h2></div><!– 1.开发环境版本，包含了有帮助的命令行警告 –><script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script><script> var app = new Vue({       el:”#app”,       data:{          arr:[“北京”,”上海”,”广州”,”深圳”],          vegetables:[             {name:”西兰花炒蛋”},             {name:”蛋炒西蓝花”}          ]       },       methods: {          add:functiоn(){             this.vegetables.push({ name:”花菜炒蛋” });          },          remove:functiоn(){             this.vegetables.shift();          }       }, })</script></body>
v-model

获取和设置表单元素的值(
双向数据绑定
)

v-model
指令的作用是便捷的设置和获取表单元素的值

绑定的数据会和表单元素
值
相关联

绑定的数据
←→
表单元素的值

<body><div id=”app”> <input type=”button” value=”修改message” @click=”setM”> <input type=”text” v-model=”message” @keyup.enter=”getM”> <h2>{{ message }}</h2></div><!– 开发环境版本，包含了有帮助的命令行警告 –><script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script><script> var app = new Vue({       el:”#app”,       data:{          message:”黑马程序员”       },       methods: {          getM:functiоn(){             alert(this.message);          },          setM:functiоn(){             this.message =”酷丁鱼”;          }       }, })</script></body>记事本实例，添加、删除、清除、隐藏

<body><!– 主体区域 –><section id=”todoapp”> <!– 输入框 –> <header class=”header”>       <h1>小黑记事本</h1>       <input v-model=”inputValue” @keyup.enter=”add” autofocus=”autofocus” autocomplete=”off” placeholder=”请输入任务”             class=”new-todo” /> </header> <!– 列表区域 –> <section class=”main”>       <ul class=”todo-list”>          <li class=”todo” v-for=”(item,index) in list”>             <div class=”view”>                   <span class=”index”>{{ index+1 }}.</span>                   <label>{{ item }}</label>                   <button class=”destroy” @click=”remove(index)”></button>             </div>          </li>       </ul> </section> <!– 统计和清空 –> <footer class=”footer” v-show=”list.length!=0″>    <span class=”todo-count” v-if=”list.length!=0″>       <strong>{{ list.length }}</strong> items left    </span>       <button v-show=”list.length!=0″ class=”clear-completed” @click=”clear”>          Clear       </button> </footer></section><!– 底部 –><footer class=”info”> <p>       <a href=”http://www.itheima.com/”><img src=”./img/black.png” alt=”” /></a> </p></footer><!– 开发环境版本，包含了有帮助的命令行警告 –><script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script><script> var app = new Vue({       el: “#todoapp”,       data: {          list: [“写代码”, “吃饭饭”, “睡觉觉”],          inputValue: “好好学习,天天向上”       },       methods: {          add: functiоn () {             this.list.push(this.inputValue);          },          remove: functiоn (index) {             console.log(“删除”);             console.log(index);             this.list.splice(index, 1);          },          clear: functiоn () {             this.list = [];          }       }, })</script></body>
axios

axios
必须先导入才可以使用

使用
get
或
post
方法即可发送对应的请求

then
方法中的回调函数会在请求成功或失败时触发

通过回调函数的形参可以获取响应内容,或错误信息

axios
回调函数中的
this
已经改变,无法访问到
data
中数据

把
this
保存起来,回调函数中直接使用保存的
this
即可

和本地应用的最大区别就是改变了
数据来源

自定义参数可以让代码的
复用性
更高

methods
中定义的方法内部，可以通过
this
关键字点出其他的方法

原创文章，作者：starterknow，如若转载，请注明出处：https://www.starterknow.com/126514.html

vue.js快速入门

相关文章：

相关推荐

请登录

联系我们