Vue快速简单入门

vue基础

1.vue单文件方式及启动

单文件就是以.vue结尾的文件。最终通过webpack也会编译成*.js在浏览器运行 *内容：++ -1:template中只能有一个根节点 -2:script中按照export default{配置}来写 -3:style中 可以设置scope属性，让其只在template中生效

index.html：相当于坑，之后vue编译好的代码往里面插入 main.js : //引入vue import Vue from ‘vue’; import App from './app.vue'; //创建一个VUe实例，一般一个项目，大多都是一个vue实例来完成显示的 new Vue({ //el:'#app',//目的地 //render:'dom结构' 渲染的内容 el:'#app', render:function(creater){ return creater(App);//App包含template、scirpt、style，最终生成Dom结构 } )

*单文件启动 webpack找人来理解你的单文件代码 -vue-loader，vue-template-compiler，代码中依赖vue

2.项目目录的解读

src：存放可以看的懂的源代码，具备一定的功能划分，Mvc dist：存放真实上线的代码（减少请求，混淆代码），机器能看懂 webpack.config.js 打包生成dist下的代码 package.json 文件 包信息描述

3.vue介绍

核心概念：组件化 双向数据流（基于Es5中的defineProperty来实现的）IE9才实现 组件：组合起来的一个部件（头部，底部，中部） 细分代码 +头部：页面，样式，动态效果 +代码：template style script

4.vue中常用的v-指令演示

v-text: v-html: v-if: v-show: v-moudel

5.子组件通信

*通过new VUe（）这样的一个对象，来$on{(}^{\prime }事件{名}^{\prime },fn(prop1,pro2))\ast 另一个组件引入同一个vuebus,来$emit(‘史建民’,prop1,pro2)

6.过滤器

*content |过滤器，vue中没有提供相关的内置过滤器，可以自定义过滤器 *组件内的过滤器+全局过滤器 -组件内过滤器 + 全局过滤器 +多个key就是不同过滤器名，多个value就是与key对应的过滤方式函数体 -vue。filter(名，fn) 全局：范围大，如果出现同名时，权力小 组件内：如果出现同名时，权力大，范围小 +显示：{{text| myFilter}} +filters:{ myFilter:function(value){ return value.split(’’).reverse().join(’’) } },

7.获取dom元素

*在指定的元素上，添加ref=“名称A” *在获取的地方加入this.$refs.名称A-如果ref放在了原生DOM元素上，获取的数据就是原生DOM对象-如果ref放在了组件对象上，获取的就是组件对象+1：获取到DOM对象，通过this.$refs.sub.$el,进行操作 -对应的事件 -created 完成了数据的初始化，此时还未生成DOM，无法操作DOM +mounted 将数据已经装载到了DOM之上，可以操作DOM

8.vue-router

*前端路由，核心就是锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据 *ui-router ：锚点值改变，如何获取模板？ajax *vue中，模板数据不是通过ajax请求来，而是调用函数来获取到模板内容 *核心：锚点值改变 *以后看到vue开头，就知道必须vue.use *vue的核心插件： -vue-router路由 -vuex管理全局共享数据 *使用方式 -下载： vue-router官网找 2.在main.js中引入:import VueRouter from ‘vue-router’; 3.安装插件 vue.use(VueRouter) 4.创建路由对象并配置路由规则 +let router new VueRouter({router:[{path:’/home’,component:Home}] }); 5将其路由对象传递给vue的实例，option中 + options中加入router:router 6.在app.vue中留坑

9.命名路由

*需求： 通过a标签，做页面数据的跳转 *使用router-link标签 - 1：去哪里 去北京 - 2: 去哪里 去北京 +更利于维护，如果修改了path，只修改路由配置中的path，该a标签会根据修改后的值生成href属性

10.参数router-link

*在vue-router中，有两大对象被挂载到了实例this *$route(只读，具备信息的对象)、$router(具备功能函数) *查询字符串 -1：去哪里 xxxx -2: 导航（查询字符串path不用改）{name:‘detail’,path:’/detail’,组件} -3：去了干吗，获取路由参数（要注意时query还是parms和对应id名） + this.$route.query.id\ast path方式-1：去哪里<router-link:to="name{:}^{\prime }deati{l}^{\prime },params:name:1">xxxx</router-link>-2:导航（path方式需要在路由规则上加上/:xxx）name{:}^{\prime }detai{l}^{\prime },path{:}^{\prime }/:nam{e}^{\prime },组件-3：去了干吗，获取路由参数（要注意时query还是parms和对应name名）+this.$route.params.name

11.404

-1: {path:'*',component:'/Notfindvue'

12.多视图

一次行为=一个坑+一个路由+一个组件 一次性为=多个坑+一个路由+多个组件 components 多视图是一个对象，对象内多个key和value -key对应视图的name属性 -value就是要显示的组件对象 -1： main.js: routs:[ {path:’/’,components:{//components一定要加s因为有多个坑 header:headervue,//header为router-view 中的name default:footervue,//default默认为没有那个name的router-view footer:footervue }} ]

1.Fetch请求

js部分

new Vue({ el:'#vue-app', data(){ return{ todos:[], todo:{ title:'', completed:false } }; }, mounted(){//mounted的作用：在项目渲染之前加载的函数 //fetch api请求接口 fetch("https://jsonplaceholder.typicode.com/todos") .then(res=>{ return res.json();//固定写法 }) .then(todos=>{ this.todos=todos;//得到这个接口数据后，赋值给vue的数据属性todo s }) }, methods:{ // fetch实现post请求 onSubmit(){ fetch('https://jsonplaceholder.typicode.com/todos',{ method:'POST',//实现其他请求更改名字即可 body:JSON.stringify(this.todo), headers:{ 'Content-type':'application/json' } }) .then(res=>{ return res.json(); }) .then(todo=>{ this.todos.unshift(todo); }); } } });

html部分

<h1>Fetch请求</h1> <div id="vue-app"> <!--post请求 --> <form @submit="onSubmit"> <input type="text" v-model="todo.title"/> <input type="checkbox" v-model="todo.completed"/> <input type="submit" value="提交"/> </form> <ul> <li v-for="todo in todos"> <h1>{{todo.title}}</h1> <p v-if="todo.completed">{{todo.completed}}</p> </li> </ul> </div>

2.Axios请求

js部分

new Vue({ el:'#vue-app', data(){ return{ todos:[], todo:{ title:'', completed:false } }; }, mounted(){ //mounted的作用：在项目渲染之前加载的函数 //axios get请求接口 axios.get('https://jsonplaceholder.typicode.com/todos')//.../todos1后面加的数字代表ID .then(res=>{ this.todos=res.data ; }) }, methods:{ onSubmit(){ //axios实现post请求 axios .post('https://jsonplaceholder.typicode.com/todos', this.todo) .then(res=>{ this.todos.unshift(res.data); }) } } });

html部分

<h1>Axios请求</h1> <div id="vue-app"> <!--post请求 --> <form @submit="onSubmit"> <input type="text" v-model="todo.title"/> <input type="checkbox" v-model="todo.completed"/> <input type="submit" value="提交"/> </form> <ul> <li v-for="todo in todos"> <h1>{{todo.title}}</h1> <p v-if="todo.completed">{{todo.completed}}</p> </li> </ul> </div>

3.vue安装脚手架教程

一、脚手架需要的环境 1.Node.js 运行环境 安装步骤：在官网上下载👉https://nodejs.org/zh-cn/或者在电脑应用市场上下载 2.npm(node package manage)依赖包 （node.js安装时自带的依赖包）; 3.测试是否安装成功： 在cmd中输入 node -v 看是否有版本号，接着输入 npm -v ，看是否有版本号。 二、安装脚手架 1.打开cmd窗口输入：npm install -g @vue/cli 2.测试脚手架是否安装成功：vue --version 三、安装淘宝镜像 1.打开cmd窗口输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 2.测试是否安装成功：cnpm --version 四、安装webpack webpack是当前前端最热门的前端资源模块化管理和打包工具。 1.打开cmd输入：npm install webpack -g（-代表全局安装） 2.输入webpack -v是否安装成功。

4.配置文件属性的使用

1.webpack属性配置

moudule.exports={ entry:{ //main是默认入口，也可以是多入口 main:'./src/main.js' }, //出口 output:{ filename:'.build.js', //指定js文件 path:path.join(_dirname,'..','dist',) //最好是绝对路径 //代表当前目录的上一级的dist }, module:{ //一样的功能rules: webpack2.x之后新加的 loaders:[ require('./a.css||./a.js') { test:/\.css$\/, loader:'style-loader!css-loader', //多个loader用！分割 //顺序是反过来的2！1 }, { test:/\.(jpg|svg)$/, loader:'url-loader?limit=4096&name=[name].[ext]', //多个参数用&分割 //顺序是反过来的2！1 //[name].[ext] 内置提供的，因为本身是先读这个文件 option:{ limit:4096, name:'[name].[ext]' } } ] }, plugins:[ //插件的执行顺序是依次执行的 new htmlWebpackPlugin({ template:'./src/index.html' }) //将src下的template属性描述的文件根据当前配置的output.path, //将文件移动到该目录 ] } ## 6.vue阶段总结 ### 问题： #### 1.脚手架安装 一、脚手架需要的环境 1.Node.js 运行环境 安装步骤：在官网上下载👉https://nodejs.org/zh-cn/或者在电脑应用市场上下载 2.npm(node package manage)依赖包 （node.js安装时自带的依赖包）; 3.测试是否安装成功： 在cmd中输入 node -v 看是否有版本号，接着输入 npm -v ，看是否有版本号。 二、安装脚手架 1.打开cmd窗口输入：npm install -g @vue/cli 2.测试脚手架是否安装成功：vue --version 三、安装淘宝镜像 1.打开cmd窗口输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 2.测试是否安装成功：cnpm --version 四、安装webpack webpack是当前前端最热门的前端资源模块化管理和打包工具。 1.打开cmd输入：npm install webpack -g（-代表全局安装） 2.输入webpack -v是否安装成功。 #### 2.注册组件 一·注册全局组件 进入main·js，导包：import idefinition from "xxxx/xxx.vue" 创建组件：Vue·component（id，idefinition） 在任何组件使用时直接在html中加入<id/> 二·注册局部组件 1.单独声明组件。用js 对象注册组件

var ComponentA = { template:<p>注册一个组件aaaa</p> }

var ComponentB = {emplate:<p>注册一个组件bbb</p> } var ComponentC = { /* … */ }

new Vue({ el: ‘#app’, components: { ‘com-A’: ComponentA, ‘com-B’: ComponentB } })

在挂载的元素中使用组件 ``` 2.直接在实例中components属性中注册：然后在挂载的根元素中使用 在main.js文件导入每个你想使用的组件 import Base from './Base.vue' 在使用的组件的js： export dafault{ components:{ Base } } Html： #### 3.router使用方式 1.安装vue-router 模块 cnpm install vue-router --save 2.在main·js中引用并使用vue-router模块 import VueRouter from 'vue-router' Vue.use(VueRouter) 3.创建路由地址分离routes文件 ``` import default[ {path:'/',components:ShowBlogs}, {path:'/',components:AddBlog}, ] ``` 4.设置路由模块设置mode去掉浏览器地址后面的#号 ``` import Routes from './routes' const router= new VueRouter({ routes:Routes, mode:'history' })

new Vue({ el:’#app’, render: h=>h(App), router:router })

5.在app.vue中设置router-view ``` 6.设置router-link地址 ``` xxx xx 去北京 ``` 7.router-link * 在vue-router中，有两大对象被挂载到了实例this * $route(只读、具备信息的对象)、$router(具备功能函数) * 查询字符串 - 1:去哪里 `xxx` - 2:导航(查询字符串path不用改) `{ name:'detail' , path:'/detail',组件}` - 3:去了干嘛,获取路由参数(要注意是query还是params和对应id名) + `this.$route.query.id` * path方式 - 1:去哪里 `xxx` - 2:导航(path方式需要在路由规则上加上/:xxx) - `{ name:'detail' , path:'/detail/:name',组件}` - 3:去了干嘛,获取路由参数(要注意是query还是params和对应name名) + `this.$route.params.name`

4.路由器添加点击事件

在路由器中添加点击事件必须加上·native修饰符

5.渲染数据去重

1.存储数据时，添加一个特殊属性值当作标记（最好是布尔类型） 存储时为true ，当获取相同的数据时，修改该属性为false 在渲染时，根据该属性进行的真假进行显示

知识点总结

6.生命周期图示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YAq9clkl-1601791735705)(https://note.youdao.com/favicon.ico)]

7.动态参数：

<a v-bind:[attributeName]=“url”>… 如果你的 Vue 实例有一个 data 属性 attributeName，其值为 “href”，那么这个绑定将等价于 v-bind:href

8.修饰符：

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

10.computed属性和watch属性

1.computed

<div class="test"> <p>原始的信息{{message}}</p> <p>计算后的信息{{ComputedMessage}}</p> </div> js代码 var myVue = new Vue({ el: ".test", data: { message:12 }, computed:{ ComputedMessage:function () { return this.message+10; } } }); 界面会显示 12 和 22 上述的方式是一种缓冲的实现的效果，这种实现的方式依赖于它的缓寸，计算得到的属性只有在相关依赖（message）改变的时候才会重新取值，这就意味着只要message没有发生改变的时候，多次访问ComputedMessage都不会再重新执行计算的这个属性。

2.watch

<div class="test"> <p>原始的信息{{fullName}}</p> <button @click="fu">test</button> </div> js代码 var myVue = new Vue({ el: ".test", data: { firstName:"fur", lastName:"bool", fullName:"sasas dsdsd dsds" }, computed:{ fullName:{ get:function () { console.log("get") return this.firstName+this.lastName }, set:function(value){ var names=value.split(" "); this.firstName=names[0]; this.lastName=names[names.length-1]; console.log("set"); } } }, methods:{ fu:function () { myVue.fullName="sasas dsdsd dsds"; console.log(myVue.firstName); //sasas console.log(myVue.lastName); //dsds } } });

首先会输出get； 在点击按钮为fullName赋值的时候首先调用set 再调用get方法。

11.Class和style绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 1.第一种方法：

v-bind:class="{a:b,c:b}" a c 代表CSS样式表里相应的样式名 b 代表true(启用此样式)/false(不启用此样式)

html

<!--vue-app是根容器--> <div id="vue-app"> <input type="button" v-on:click="a=!a" v-bind:class="{changeColor:a,changeWidth:a}" value="change!"> </div>

css

.changeColor{ background: brown; color: #ffffff; } .changeWidth{ width: 200px; }

css

.changeColor{ background: brown; color: #ffffff; } .changeWidth{ width: 200px; }

js

new Vue({ el:"#vue-app", data:{ a:false }, methods:{}, computed:{} });

2.第二种方法

<!--vue-app是根容器--> <div id="vue-app"> <input type="button" v-on:click="a=!a" v-bind:class="change" value="change"> </div> //实例化vue对象 new Vue({ el:"#vue-app", data:{ a:false }, methods:{}, computed:{ change:function(){ return { changeColor:this.a, changeWidth:this.a } } } });

11.组件通信

porps/$emit方式父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父组件通信 1.父组件向子组件传值 通过一个例子说明父组件如何向子组件传递数据：在子组件article.vue中如何获取父组件 section.vue中的数据 articles:[‘红楼梦’，‘西游记’,‘三国演义’]

// section父组件 <template> <div class="section"> <com-article :articles="articleList"></com-article> </div> </template> <script> import comArticle from './test/article.vue' export default { name: 'HelloWorld', components: { comArticle }, data() { return { articleList: ['红楼梦', '西游记', '三国演义'] } } } </script> // 子组件 article.vue <template> <div> <span v-for="(item, index) in articles" :key="index">{{item}}</span> </div> </template> <script> export default { props: ['articles'] } </script> 总结：prop只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且prop只读，不可被修改，所有修改都会失效并警告。

2.子组件向父组件传值 // 父组件中

//子组件

12.ajax请求

vue本身不支持ajax请求，需要使用“axios”的第三方插件，axios是基于promise的http请求客户端，用来发送请求，是Vue2.0推荐使用的，同时不再对vue-resource进行更新和维护。也可以使用vue-resource进行跨域请求。 axios的安装和使用 通过npm安装和直接引用其js文件； 基本使用： a·可以在methods中定义一个方法来调用axios（）方法 ； b·使用axios（【options】）方法，axios（【options】）.then(function(respon){}).catch(function(error){}), 在这里.then就是成功后要做的事情，responce就是成功后 返回的对象（数据就在这个对象里），catch就是失败的时候要做的事情，error就是错误后返回的错误信息对象 c.使用axios.get（url[,options]）方法； get传参方式： 1.直接拼接在url后面（不建议）； 2.在params的选项传参（options中的一个选项params，是一个对象） d.使用axios·post（url，data，【options】)方法； axios.post（url,jsonData,{                                 transformRequest：[                                 function(data){                                         <!-- 这里的data就是前面的jsonData -->                                         在这里进行手动拼接成“键值对”字符串，并返回                                     }                                 ]                             }[options]）