菜鸟的Vue快速入门

说明
一、前期准备
二、常用方法
- demo案例
- if-else
- for循环
- 事件绑定
- 异步请求（axios）
- 组件基础
- 表单属性绑定
- 计算属性
- 插槽
- 自定义内容转发
三、补充

说明

本文参考了主要整理了一些Vue常用语法，给出相应代码，存在有大量不足的地方，建议参考Vue官网文档进行学习

注意：本文仅为记录学习轨迹，如有侵权,联系删除

一、前期准备

工具采用idea 2019，开始前下载Vue.js插件

设置vue新建文件模板

模板

<template></template><script>export default {name:"${NAME}"}
</script><style scoped></style>

二、常用方法

demo案例

跟后端一样，前端逐渐趋向于系统化，有条件语句、循环语句、自己的服务器（nodejs）、可独立运行、测试和部署，不可否认的是前端正在逐渐崛起。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app">{{ message }}
</div><!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({el:'#app',data:{message:'hello vue！'}})
</script></body>
</html>

引进虚拟Dom、MVVM模型等，具体概念查看Vue官网，这里主要展示代码，多玩一下代码就可以感受到Vue强大及其使用。

if-else

就跟后端的条件差不多

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app-1"><p v-if="seen">现在你看到我了</p><p v-else>现在你看不到我了</p>
</div><div id="app-2"><p v-if="type=='A'">this is A</p><p v-else-if="type=='B'">this is B</p><p v-else-if="type=='C'">this is C</p><p v-else>this is none</p>
</div><!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var app1 = new Vue({el: '#app-1',data: {seen: true}})var app2 = new Vue({el:'#app-2',data: {type: 'A'}})
</script>
</body>
</html>

for循环

这里的for循环语法跟python有点像

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ul id="app-1"><li v-for="item in items">{{item.message}}</li>
</ul><ul id="app-2"><li v-for="(item, index) in items">{{ parentMessage }} - {{ index }}<p v-if="index == 0"> {{ item.message0 }}</p><p v-if="index == 1"> {{ item.message1 }}</p><p v-if="index == 2"> {{ item.message2 }}</p></li>
</ul><!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var app1 = new Vue({el: '#app-1',data: {items:[{message:'第一个元素'},{message: '第二个元素'},{message: '第三个元素'}]}})var app2 = new Vue({el: '#app-2',data: {parentMessage:'this is parent',items:[{message0: '第一个元素'},{message1: '第二个元素'},{message2: '第三个元素'}]}})
</script>
</body>
</html>

事件绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><button id="app-1" v-on:click="sayHello">click me</button><!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var app = new Vue({el:'#app-1',data:{message:'this is message'},methods:{//事件的绑定，方法必须定义在Vue的methods对象中，v-on:事件sayHello:function (event) {alert(this.message);}}})</script>
</body>
</html>

异步请求（axios）

异步请求是最关键的一个技术

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>异步请求(axios)</title>
</head>
<body>
<!--get的异步请求-->
<div id="app1">名字:{{info.data.name}}<br>年龄:{{info.data.age}}<br>
</div>
<hr><!--post的异步请求-->
<div id="app2">名字:{{info.data.name}}<br>年龄:{{info.data.age}}<br>
</div>
<hr><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">// get的异步请求new Vue({el: '#app1',data () {return {info: null}},mounted () {axios.get('../json/data.json')//这里一般请求后端的接口，接口返回一个json字符串.then(response => (this.info = response))//将请求返回的数据赋值给info.catch(function (error) { // 请求失败处理console.log(error);});}})// post的异步请求new Vue({el: '#app2',data () {return {info: null}},mounted () {axios.post('../json/data.json')//这里一般请求后端的接口，接口返回一个json字符串.then(response => (this.info = response))//将请求返回的数据赋值给info.catch(function (error) { // 请求失败处理console.log(error);});}})</script>
</body>
</html>

组件基础

组件化开发，提高代码可复用性，详细参考Vue官网

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>组件基础</title>
</head>
<body><!--<p>组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：</p>-->
<div id="bc"><button-counter></button-counter><br><button-counter></button-counter><br><button-counter></button-counter><br><button-counter></button-counter>
</div>
<hr><!--通过title给组件blog-post传值-->
<div id="bp1"><blog-post1 title="this is blog-1"></blog-post1><blog-post1 title="this is blog-2"></blog-post1><blog-post1 title="this is blog-3"></blog-post1>
</div>
<hr><!--自定义blog-post2组件,循环传值（复杂）-->
<div id="bp2"><blog-post2 v-for="item in items" v-bind:value="item"></blog-post2>
</div>
<hr><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>// 这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的Vue.component('button-counter', {data: function () {return {count: 0}},template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'})//自定义blog-post1组件,需要给title传值进去（简单）Vue.component('blog-post1',{props:['title'],template:'<h3>{{title}}</h3>'})//自定义blog-post2组件,循环传值（复杂）Vue.component('blog-post2',{props:['value'],template:'<h3>{{value}}</h3>'})new Vue({ el: '#bc' })new Vue({ el: '#bp1' })new Vue({el:'#bp2',data:{items:['A','B','C']}})</script>
</body>
</html>

表单属性绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单输入绑定</title>
</head>
<body>
<hr>
<div id="app-1">#文本 <br><input v-model="message" placeholder="edit me"><p>Message is {{message}}</p>
</div>
<hr><div id="app-2">#多行文本 <br><span>Multiline message is:{{message}}</span><br><textarea v-model="message"></textarea>
</div>
<hr><div id="app-3">#复选框 <br><input type="checkbox" id="jack" value="jack" v-model="checkedNames"><input type="checkbox" id="john" value="john" v-model="checkedNames"><input type="checkbox" id="mike" value="mike" v-model="checkedNames"><input type="checkbox" id="tony" value="tony" v-model="checkedNames"><p for="checkbox">Checked names: {{checkedNames}}</p>
</div>
<hr><div id="app-4">#单选按钮 <br><input type="radio" id="mela" value="男" v-model="picked">男<input type="radio" id="femela" value="女" v-model="picked">女<p for="checkbox">Picked : {{picked}}</p>
</div>
<hr><div id="app-5">#选择框单选 <br><select v-model="selected"><option disabled value="">---请选择---</option><option>A</option><option>B</option><option>C</option></select><p>Selected: {{selected}}</p>
</div>
<hr><div id="app-6">#选择框多选 <br><select v-model="selected" multiple style="width: 50px;"><option disabled value="">---请选择---</option><option>A</option><option>B</option><option>C</option></select><p>Selected: {{selected}}</p>
</div>
<hr><!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>new Vue({el: '#app-1',data: {message: ''}})new Vue({el: '#app-2',data: {message: ''}})new Vue({el: '#app-3',data: {// checkedNames: ''checkedNames: []}})new Vue({el:'#app-4',data:{picked:''}})new Vue({el:'#app-5',data:{selected:''}})new Vue({el:'#app-6',data:{selected:[]}})</script>
</body>
</html>

计算属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>计算属性</title>
</head>
<body><!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>new Vue({el:"#app1",data:{message:"hello world"},methods:{currentTime1:function () {return Date.now();//返回一个时间戳}},computed:{//计算属性（相当于缓存）:metheds,computed方法名不能重名，重名之后之后调用methods的方法currentTime2:function () {this.message;return Date.now();//返回一个时间戳}}});
</script>
</body>
</html>

插槽

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>插槽</title>
</head>
<body><div id="app1"><todo><todo-title slot="todo-title" v-bind:title="title"></todo-title><todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items></todo>
</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>//slotVue.component("todo",{template:'' +'<div>' +'   <slot name="todo-title"></slot>' +'   <ul>' +'       <slot name="todo-items"></slot>' +'   </ul>' +'</div>'});Vue.component('todo-title',{props:['title'],template: '<li>{{title}}</li>'});Vue.component('todo-items',{props: ['item'],template:'<li>{{item}}</li>'});new Vue({el:'#app1',data:{title:"this is title",todoItems:['C/C++','Java','Python']}});</script>
</body>
</html>

自定义内容转发

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自定义内容分发</title>
</head>
<body><div id="app1"><todo><todo-title slot="todo-title" v-bind:title="title"></todo-title><todo-items slot="todo-items"v-for="(item,index) in todoItems"v-bind:item="item"v-bind:index="index"v-bind:key="index"v-on:remove="removeItems(index)"></todo-items></todo>
</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>//slotVue.component("todo",{template:'' +'<div>' +'   <slot name="todo-title"></slot>' +'   <ul>' +'       <slot name="todo-items"></slot>' +'   </ul>' +'</div>'});Vue.component('todo-title',{props:['title'],template: '<li>{{title}}</li>'});Vue.component('todo-items',{props: ['item','index'],template:'' +'<li>' +'   {{item}}' +'   <button @click="remove">删除</button>' +'</li>',methods: {remove:function (index) {this.$emit('remove',index);}}});var vm =  new Vue({el:'#app1',data:{title:"this is title",todoItems:['C/C++','Java','Python']},methods:{removeItems:function (index) {console.log("删除了"+this.todoItems[index]+"OK");this.todoItems.splice(index,1);//一次删除一个元素}}});</script>
</body>
</html>

三、补充

上面的一些方法，建议去官网了解了相关的概念后再看，在知道相关概念后学习效率最高，其次个人觉得只要看得懂代码，知道怎么用即可，没必要深究，毕竟现在时间宝贵，讲究高效学习，后面的开发也不会用这种原生的代码，很多都是用的框架，Vue则会使用Vue-cli脚手架进行快速开发和独立部署，即所谓的前后端分离。

菜鸟的Vue基础快速入门相关推荐

Vue 基础快速入门(二)
Vue 组件化编程模块, 组件, 模块化与组件化模块理解:向外提供特定功能的 js 程序, 一般就是一个 js 文件为什么:js 文件很多很复杂作用:复用 js,简化 js 的编写, 提高 ...
Vue 基础快速入门(一)
Vue 渐进式 JavaScript 框架,用来动态构建用户界面特点: 遵循 MVVM 模式编码简洁,体积小,运行效率高,适合移动/PC 端开发它本身只关注 UI,可以轻松引入 vue 插件或 ...
（vue基础试炼_01）使用vue.js 快速入门hello world
文章目录一.需求案例二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法三.案例vue简述? 四.案例趣味延伸五.表达值作用及嘱咐语一. ...
.NET Core实战项目之CMS 第六章入门篇-Vue的快速入门及其使用
写在前面上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
Python 零基础快速入门趣味教程 (咪博士海龟绘图 turtle) 4. 函数
什么样的程序员才是优秀的程序员?咪博士认为"慵懒"的程序员才是真正优秀的程序员.听起来不合逻辑?真正优秀的程序员知道如何高效地工作,而不是用不止境的加班来完成工作任务.函数便是程序 ...
零基础快速入门web学习路线（含视频教程）
下面小编专门为广大web学习爱好者汇总了一条完整的自学线路:零基础快速入门web学习路线(含视频教程)(绝对纯干货)适合初学者的最新WEB前端学习路线汇总! 在当下来说web前端开发工程师可谓是高福利 ...
python海龟教程_Python 零基础快速入门趣味教程 (咪博士海龟绘图 turtle) 7. 条件循环...
条件循环能够让程序在条件成立时(即为真时)重复执行循环体中的语句.如果条件一直成立(即永远不会为假),则循环会一直进行下去,不会停止.如果初始时,条件不成立,则循环 1 次也不会执行.Python 中 ...
【Python零基础快速入门系列 | 03】AI数据容器底层核心之Python列表
• 这是机器未来的第7篇文章原文首发地址:https://blog.csdn.net/RobotFutures/article/details/124957520 <Python零基础快速入门 ...
【Python零基础快速入门系列 | 07】浪漫的数据容器：成双成对之字典
这是机器未来的第11篇文章原文首发链接:https://blog.csdn.net/RobotFutures/article/details/125038890 <Python零基础快速入门系 ...
ROS2零基础快速入门
ROS2入门最快需要多少时间?3天: ROS2开发一款基础机器人需要多久?3个星期: ROS2怎么才能算"精通"?不可能,3年也不行-- 如何判断一款通用性软件成熟并可以投入精力去 ...

菜鸟的Vue基础快速入门