快速入门Vue 🎃 多种选择器🎈class选择器🎈标签选择器 🧡 data数据对象💛 Vue 指令?设置标签的文本值（textContent）?设置标签的innerHtml（v-html）?为元素绑定事件（v-on）?根据表达式的真假，切换元素的显示和隐藏（v-show）?根据表达式的真假，切换元素的显示和隐藏(操纵dom元素) （v-if）?设置元素的属性（v-bind）?根据数据生成列表结构（v-for）? 传递自定义参数，事件修饰符 (v-on补充)?获取和设置表单元素的值（双向数据绑定v-model） 💗 Vue结合网络数据开发应用🐾axios结合Vue
使用工具 vs code 建议使用插件 Live Server Preview（方便快速查看代码效果）
打开官网，我们可以看到如下两种环境 🎈 因为我们是初学者，我们可以直接最好使用开发环境，这会给我们更好的代码提示，让我们更快入门。
根据官网的介绍，我们先入进行入门练习
先导入开发环境
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!--先在body里面创建一个div--> <div id="app"> {{ message }} </div>在js里面写如下的代码
注意：Vue的首字母大写
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })全局来看
<!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> </head> <body> {{message}} <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="app" > {{message}} </div> <script> var app=new Vue({ el:"body", data:{ message:"Hello Vue!" } }) </script> </body> </html>运行结果
Hello Vue!入门总结：
导入开发版本的Vue.js创建Vue实列对象，设置el属性和data属性使用简洁的模板语法把数据渲染到页面🎃 多种选择器 🎈class选择器 <!--先在body里面创建一个div--> <div id="app" class="app"> {{ message }} </div> var app = new Vue({ el: '.app', data: { message: 'Hello Vue!' } })
运行结果
Hello Vue!🎈标签选择器
只用更改这里
var app = new Vue({ el: 'div', data: { message: 'Hello Vue!' } })运行结果
Hello Vue!🧡 data数据对象 <body> {{message}} <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="app" class="app"> {{message}} <span>{{school}}</span> <h3>{{school.name}}</h3> <h3>{{school.mobile}}</h3> <h3>{{like}}</h3> <h2>{{like[0]}}</h2> <h2>{{like[1]}}</h2> </div> <script> var app=new Vue({ el:"#app", data:{ message:"你好，xxx", school:{ name:"xxx学院", mobile:"13143xxxxxx" }, like:["csgo","LOL"] }, }) </script> </body>
结果演示
{{message}} 你好，xxx { "name": "xxx学院", "mobile": "13143xxxxxx" } xxx学院 13143xxxxxx [ "csgo", "LOL" ] csgo LOLdata：数据对象总结
Vue中用到的数据定义在data中data可以写复杂类型的数据渲染复杂类型数据时，遵守js语法即可💛 Vue 指令 ?设置标签的文本值（textContent） <body> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="app" > <h2 v-text="message"> 入门Vue如此简单 </h2> <h2>入门Vue如此简单{{message}}</h2> </div> <script> var app=new Vue({ el:"#app", data:{ message:"生命不息，学习不止", }, }) </script> </body>
结果演示
生命不息，学习不止 入门Vue如此简单 生命不息，学习不止我们可以看到当我们直接使用v-text时，我们的内容会全部被替换，于是我们使用插入法入门{{message}}来防止全部替换
当然我们也可以进行字符串拼接
```html <body> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="app" > <h2 v-text="message+'!'"> 爪哇贡尘拾Miraitow </h2> <h2>爪哇贡尘拾Miraitow{{info+' 加油'}}</h2> </div> <script> var app=new Vue({ el:"#app", data:{ message:"生命不息，学习不止", info:"后端路漫漫,什么都要学" }, }) </script> </body>结果演示
生命不息，学习不止! 爪哇贡尘拾Miraitow 后端路漫漫,什么都要学 加油?设置标签的innerHtml（v-html） <body> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="app" > <p v-html="content"></p> <p v-text="content"></p> </div> <script> var app=new Vue({ el:"#app", data:{ content:"爪哇贡尘拾Miraitow" }, }) </script> </body>
结果演示
爪哇贡尘拾Miraitow 爪哇贡尘拾Miraitow可以看出来没有什么区别，然后我们做一下修改
<body> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="app" > <p v-html="content"></p> <p v-text="content"></p> </div> <script> var app=new Vue({ el:"#app", data:{ // content:"爪哇贡尘拾Miraitow", content:"<a href='http://·/api/joke/list 是一个笑话的网络接口，你可以直接在浏览器访问，会随机产生笑话 后面的num=3就是三条笑话axios基本使用
<body> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <input type="button" value="get请求" class="get"> <input type="button" value="post请求" class="post"> <!--官网提供的在线地址--> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> /* 接口1：随机笑话 请求地址：https://autumnfish.cn/api/joke/list 请求方式：get 请求参数：num(笑话条数，数字) 响应内容: 随机笑话 */ //获得get按钮，添加一个点击事件 document.querySelector(".get").onclick = function(){ axios.get("https://autumnfish.cn/api/joke/list?num=3") .then(function (response){ console.log(response); },function(err){ console.log(err); } ) } </script> </body>默认状态
当我们点击get请求的按钮我们来看控制台信息 我们可以看到，触发了第一个回调函数 那么错误的回调函数会是什么样子的？
我们去故意改变请求的地址，让请求出错
axios.get("https://autumnfish.cn/api/joke/list1234?num=3")我们再去看控制台的信息 我们可以看到，触发了第二个回调函数
我们接下来看看post请求
<body> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <input type="button" value="get请求" class="get"> <input type="button" value="post请求" class="post"> <!--官网提供的在线地址--> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> /* 接口2：用户注册 请求地址：https://autumnfish.cn/api/user/reg 请求方式：post 请求参数：num(用户名，字符串) 响应内容: 注册成功或失败 */ document.querySelector(".post").onclick = function ( ) { axios.post("https://autumnfish.cn/api/user/reg",{ username:"jack"}) .then(function (response){ console.log(response); },function(err){ console.log(err); } ) } </script> </body>看控制台的显示 根据我们截的图我们可以看到jack的用户已经被注册了
于是我们修改以下
axios.post("https://autumnfish.cn/api/user/reg",{ username:"襄阳牛肉面"})显示注册成功，同样的和之前的get方法一样，我们把网址改为错误的，也会在控制台显示一样的404
axios总结：
axios必须导入才能使用使用get和post方法即可发送对应的请求then方法中的回调函数会请求成功或请求失败的时候触发通过回调函数的形参可以获取响应内容，或错误信息文档传送门
https://github.com/axios/axios
🐾axios结合Vue
那我们的axios和Vue怎么结合使用？
<body> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!--官网提供的在线地址--> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <div id="app"> <input type="button" value="获取笑话" @click="getJoke"> <p>{{joke}}</p> </div> <script> /* 接口1：随机笑话 请求地址：https://autumnfish.cn/api/joke/list 请求方式：get 请求参数：num(笑话条数，数字) 响应内容: 随机笑话 */ var app=new Vue({ el:"#app", data:{ joke:"天大的笑话" }, methods:{ getJoke:function(){ axios.get("https://autumnfish.cn/api/joke/list?num=3") .then(function (response){ console.log(response); },function(err){ console.log(err); } ) } } }) </script> </body>默认状态 当我们点击获取笑话的按钮然后去看控制台 有同学说每次显示这么多内容看的结果不直观，那么我们来修改代码
只需要修改一句
console.log(response.data);结果演示 这样我们就只看到笑话内容了
有些小伙伴可能会问，那我还可以用this得到data的数据嘛？ 我们来试试，只需加添加一行代码，然后看控制台的显示
console.log(this.joke)结果却发现显示的是undefined,说明当前的this已经改变了，我们不能通过this得到Vue实例data的数据了 那我们要怎么才能拿到data的数据？
<body> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!--官网提供的在线地址--> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <div id="app"> <input type="button" value="获取笑话" @click="getJoke"> <p>{{joke}}</p> </div> <script> /* 接口1：随机笑话 请求地址：https://autumnfish.cn/api/joke/list 请求方式：get 请求参数：num(笑话条数，数字) 响应内容: 随机笑话 */ var app=new Vue({ el:"#app", data:{ joke:"天大的笑话" }, methods:{ getJoke:function(){ //定义变量 var that=this; axios.get("https://autumnfish.cn/api/joke/list?num=3") .then(function (response){ console.log(response.data); // console.log(this.joke) that.joke=response.data; },function(err){ console.log(err); } ) } } }) </script> </body>这时当我们再去点击获取笑话按钮
这样就会把服务器返回的数据直接返回给我们的joke
axios+vue总结：
axios回调函数中的this已经改变，无法访问到data中的数据把this保存起来，回调函数中直接使用保存的this即可和本地应用的最大区别就是改变了数据来源🐾关于vue的基本使用，就介绍到这里，大家可以结合一些书籍资料，然后去看看一些简单的项目💕
------🎃 欢迎点赞 👍 收藏 ?留言 📝----- <-----希望大家期末💋过🎊🎊🎊🎊🎊----->
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
