前后端分离框架Vue+Element UI(上集)
个人简介
作者是一个来自河源的大三在校生,以下笔记都是作者自学之路的一些浅薄经验,如有错误请指正,将来会不断的完善笔记,帮助更多的Java爱好者入门。
文章目录
-
- 个人简介
- Vue2框架-2.9.6
-
- 起步
-
- 编译器选择
- CDN安装Vue
- 第一个Vue程序
- v-bind
- v-text
- v-html
- 计数器案例:v-on/@
- v-show
- v-if
- v-for
- 切换图片案例
- v-model
- Vue生命周期函数
- 定义data的3种方式
- axios异步通信
-
- 安装axios
- 使用axios
-
- get
- ()=>和function()区别
- post
- Vue Component
-
- 第一个组件
- 使用props属性传递参数
- Vue-cli脚手架
-
- 第一个Vue-cli
-
- 执行vue-cli出现报错
Vue2框架-2.9.6
该Vue2入门笔记所参考的是:Vue.js官方文档、尤雨溪讲解视频(中文翻译版)、以及诸多CSDN笔记、知乎等,仅供入门参考,不作任何深入研究!
起步
编译器选择
- IDEA(不推荐),IDEA开发Vue应用的代码提示不太友好
- Hbuilder (不推荐),Hbuilder速度慢,HbuilderX是用C++进行重写,速度更快
- HbuilderX (推荐),Vue的合作伙伴,代码提示很好,官方也推荐
- vs code (推荐),但没用过
CDN安装Vue
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
或者
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
第一个Vue程序
<div id="vue-app"> {{content}}</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script> var vue = new Vue({ el:'#vue-app', //绑定元素 data:{ //传入到绑定元素的数据 content:'hello world!!!' } });</script>
v-bind
v-bind的作用是绑定属性,例如v-bind:src,就是绑定了src属性,我们可以在vue对象里面更改即可
绑定属性语法有两种
- v-bind:src
- :src
上面这两种方式等价
<html lang="en" xmlns:v="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"><div id="vue-app"> <span v-bind:title="currentTime">vue</span></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script> var vue=new Vue({ el:'#vue-app', data:{ currentTime:'页面加载于 ' + new Date().toLocaleString() } });</script>
然后在浏览器控制台输入vue.currentTime=‘v-bind触发了’,就会发现内容被更改了
v-text
v-text和{{}}非常相似,其实他们两个作用也是差不多的。
<div id="vue-app1"> <h2 v-text="content"></h2> <h3>文本:{{content}}</h3></div><div id="vue-app2"> <h2 v-text="arr"></h2> <h3>文本:{{arr}}</h3><h3>{{arr[2]}}</h3> <h2 v-text="arr[1]"></h2></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script> var vue1=new Vue({ el:'#vue-app1', data:{ content:'我是内容' } });var vue2=new Vue({el:'#vue-app2',data:{arr:['1','2','3','4','5','6'] //传入数组}});</script>
v-html
v-text和v-html虽然看起来差不多,但是还是有很大的不同。
- v-text传入的数据不会转义成html语句
- v-html传入的数据会转义成html语句展示
例子:
<div id="vue-app"><span>---------v-text</span><br /><span v-text="content"></span><br /><span>---------v-html</span><br /><span v-html="content"></span></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript">var vue=new Vue({el:'#vue-app',data:{content:'个人主页'}});</script>
计数器案例:v-on/@
定义vue的事件方法必须在vue对象里面的methods定义,而不能在vue对象外定义
methods的事件语法规则:
- 方法名:function(也可以写方法参数){js语法}
绑定单击事件方法,两种方法等价
- v-on:click=“sub()”
- @click=“add()”
案例
<div id="vue-app"><input type="button" value="-" v-on:click="sub()"><span>{{num}}</span><input type="button" value="+" @click="add()"></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script> var vue =new Vue({el:'#vue-app',data:{num:1},//定义vue的事件方法必须在vue对象里面的methods定义,而不能在vue对象外定义。。。。methods:{sub:function(){this.num--; console.log(this); //这里的this等价于进入到data里面了},add:function(){this.num++;console.log(this.num);}} });</script>
v-show
v-show=“布尔值”,如果布尔值为true说明展示,反之为false则隐藏,底层是通过修改css样式进行隐藏的
<div id="vue-app"><h3 v-show="v1">v1</h3><h3 v-show="v2">v2</h3><h3 v-show="3>=5">v3</h3><h3 v-show="5>3">v4</h3></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var vue=new Vue({el:'#vue-app',data:{v1:true,v2:false}});</script>
v-if
<div id="vue-app"><h3 v-if="res==1">111</h3><h3 v-else-if="res==2">222</h3><h3 v-else-if="res==3">333</h3><h3 v-else>666</h3></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var vue=new Vue({el:'#vue-app',data:{res:3}});</script>
v-for
<div id="vue-app"><div v-for="(item,index) in arr">{{item}}->{{index}}</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var vue=new Vue({el:'#vue-app',data:{arr:['aaa','bbb','ccc','ddd','eee']}});</script>
切换图片案例
<div id="vue-app"><input type="button" value="<" @click="left()" v-show="index!=0"><img v-bind:src="imgs[index]" alt="" style="width: 200px;height: 200px;"><input type="button" value=">" v-on:click="right()" v-show="index!=imgs.length-1"></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script> var vue = new Vue({ el:'#vue-app', data:{ // 定义一个存放图片的数组 imgs:['http://5b0988e595225.cdn.sohucs.com/images/20170828/5ebb6bb4797e4d4faa848c530acfd016.jpeg', 'https://pic.qqtn.com/up/2019-1/2019010208201525732.jpg', 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1901564855,3168536127&fm=26&gp=0.jpg', 'http://n.sinaimg.cn/sinacn/w640h595/20180218/a939-fyrswmu0801569.jpg', 'http://pic.wodingche.com/carimg/febgjfifz.jpeg'], index:0 }, methods:{ left:function(){ console.log('left'); this.index--; }, right:function(){ console.log('right') this.index++; } } });</script>
v-model
v-model可以实现双向绑定。
<div id="vue-app"><input id="t1" type="text" v-model="text"><h3>{{text}}</h3></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script> var vue=new Vue({ el:'#vue-app', data:{ text:'默认文本' } });</script>
Vue生命周期函数
<div id="vue-app"><span id="t1">{{tx}}</span></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>// VUE生命周期钩子函数var vue=new Vue({el:'#vue-app',data:{tx:'数据加载了'},//创建vue对象前调用beforeCreate:()=>{console.log('beforeCreate')},//创建vue对象后立刻调用,此时data还没有赋值到htmlcreated:()=>{console.log(document.getElementById('t1').innerText); //返回:{{tx}}},//data赋值到html页面后触发。mounted:()=>{console.log(document.getElementById('t1').innerText);//返回:数据加载了},//销毁vue对象后触发destroyed: () => {console.log('vue对象被销毁了')}});vue.$destroy(); //销毁vue对象,触发destroyed生命周期钩子函数</script>
定义data的3种方式
这三种方法效果其实是差不多一样的,就是语法不同。
<div id="vue-app1"><span>{{content}}</span></div><div id="vue-app2"><span>{{content}}</span></div><div id="vue-app3"><span>{{content}}</span></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>// 方式一:推荐var vue1=new Vue({el:'#vue-app1',data:{content:'vue-app1'}});//方式二:不喜欢var vue2=new Vue({el:'#vue-app2',data:function(){return{content:'vue-app2'}}});//方式三:推荐var vue3=new Vue({el:'#vue-app3',data(){return{content:'vue-app3'}}});</script>
axios异步通信
axious实际上就是ajax的替代品。
安装axios
CDN安装
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
或者
<script src="https://cdn.staticfile.org/axios/0.21.0/axios.min.js"></script>
npm安装
$ npm install axios
github下载
https://github.com/axios/axios
使用axios
get
<div id="vue-app">{{json}}<input type="button" @click="getJson()" v-bind:value="btnName"></div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.staticfile.org/axios/0.21.0/axios.min.js"></script><script>var vue =new Vue({el:'#vue-app',// 等价于data:{}data(){return {json:'null',btnName:'getJson'}},methods:{// 1:方式一:this可以获取,推荐用getJson:function(){// axios异步调用//********保存当前this对象,因为axios内部访问的this不是vue对象的this*********var nthis=this; axios.get('./axios-demo.json?username=1').then(function(response){nthis.json=response.data.sites[1].name;//获取axios请求过来的json}).catch(function(err){console.log(err)});}//方式二:this获取不到,说明getJson:function(){}和getJson:()=>{}是有区别的// getJson:()=>{// // axios异步调用// //********保存当前this对象,因为axios内部访问的this不是vue对象的this*********// var nthis=this; // axios// .get('./axios-demo.json?username=1')// .then(function(response){// nthis.json=response.data.sites[1].name;//获取axios请求过来的json// })// .catch(function(err){// console.log(err)// });// }},mounted() {//********保存当前this对象,因为axios内部访问的this不是vue对象的this*********var nthis=this;axios.get('./axios-demo.json?username=1').then(function(response){console.log(nthis)}).catch(function(err){console.log(err)});}});</script>
axios-demo.json文件:
{ "name":"网站", "num":3, "sites": [ { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] }, { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] }, { "name":"Taobao", "info":[ "淘宝", "网购" ] } ]}
()=>和function()区别
()=>和function()定义方法内的this对象是不同的,很多情况还是用function()好一点
post
axios.post('/user',{ username:'root', password:123456}).then(function(response){ console.log(response)}).catch(function(err){ console.log(err)});
Vue Component
组件是可复用的Vue实例, 说白了就是一组可以重复使用的模板, 跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙,通常一个应用会以一棵嵌套的组件树的形式来组织:
第一个组件
<div id="vue-app"><my-content></my-content></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>//定义组件。。//组件必须放在new Vue绑定的el元素内,不然无法生效Vue.component('my-content',{template:'\\- Java
\- Redis
\- Docker
\
\'});var vue=new Vue({el:'#vue-app',comments:['my-content'] //可选:也可以这样写});</script>
使用props属性传递参数
注意:默认规则下props属性里的值不能为大写
<div id="vue-app"><my-content v-for="(item,index) in tx" v-bind:proptx="item"></my-content><my-foot v-bind:us="username" :pwd="password"></my-foot></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>//使用props把vue对象的参数传到Vue.component组件里面,然后配合v-bind:prop='接收的值'Vue.component('my-content',{props:['proptx'],template:'{{proptx}}
'});Vue.component('my-foot',{props:['us','pwd'],template:'{{us}}->{{pwd}}
'});var vue =new Vue({el:'#vue-app',data() {return{tx:[1,2,3],username:'admin',password:'123666'}}});</script>
Vue-cli脚手架
安装nodejs
cmd检查本机是否有nodejs:node -v如果没有就下载:下载网址:http://nodejs.cn/download/
安装npm
cmd下输入npm -v,查看是否能够正确打印出版本号即可!如果没有安装则:npm install
安装git
Git:https://git-scm.com/doenloads镜像:https://npm.taobao.org/mirrors/git-for-windows/
安装cnpm
# -g 就是全局安装npm install cnpm -g# 或使用如下语句解决npm速度慢的问题npm install --registry=https://registry.npm.taobao.org
安装webpack
npm install webpack -g 或者 npm install -g webpack检查webpack是否安装成功webpack -v
安装vue-cli
全局安装:npm install --global vue-cli检查是否安装成功vue -Vvue list
第一个Vue-cli
1:随便创建一个文件夹:D:\vue\vue-demo12:进入这个文件夹:cd D:\vue\vue-demo13: 初始化:vue init webpack 自己起一个vue项目名,例如:vue init webpack myvue14:初始化的过程中一路都选择*no*即可
安装vue-cli过程说明:
- Project name:项目名称,默认回车即可
- Project description:项目描述,默认回车即可
- Author:项目作者,默认回车即可
- Install vue-router:是否安装vue-router路由,选择n不安装(后期需要再手动添加)
- Use ESLint to lint your code:是否使用ESLint做代码检查,选择n不安装(后期需要再手动添加)
- Set up unit tests:单元测试相关,选择n不安装(后期需要再手动添加)
- Setupe2etests with Nightwatch:单元测试相关,选择n不安装(后期需要再手动添加)
- Should we run npm install for you after the,project has been created:创建完成后直接初始化,选择n,我们手动执行;运行结果!
然后就会生成一个标准的Vue项目:
运行刚刚生成的Vue项目:
1:cd vue项目名 ,例如:cd myvue12:npm run dev 运行
访问生成的地址:
这就是我们的第一个Vue-cli程序了。
执行vue-cli出现报错
解决办法
npm audit fix #进行修复即可