1.什么是MVVM?

MVVM(Model-View-ViewModel)是一种软件架构设计模式，是一种简化用户界面的事件驱动编程方式。它源自与经典的MVC模式，MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用

为什么要使用MVVM?

MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型（Model）

低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候，View也可以不变。
可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel）,设计人员可以专注于页面设计。
可测试：界面向来是比较难于测试的，而现在测试可以针对ViewModel来写

2.第一个Vue项目

第一个Vue程序

1.导入Vue.js

CDN导入

2.new 一个vue对象

3.绑定一个元素

4.放数据

5.从模板里取出来

    {{message}}

3.Vue基本语法

v-bind

使用v-bind来绑定元素特性！

v-开头的被称为指令

v-bind这个指令的意思是“将这个元素节点的title特性和Vue实例的message属性保持一致

    鼠标悬停在此处，可以查看动态绑定的信息

v-if、v-else

   我是true
   我是flase

v-for

      {{item.message}}

methods

4.Vue的双向绑定

什么是双向数据绑定？

Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，这也是Vue的精髓之处。
注意，我们所说的数据双向绑定，一定是对于Ui控件来说的，非UI控件不会涉及到数据的双向绑定，单项数据绑定是使用状态管理工具的前提，如果我们使用vuex,那么数据流也是单项的，这时就会和双向数据绑定有冲突。

为什么要实现数据的双向绑定？

在vue.js 中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vue.js
的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪;局部性数据流使用双向，简单易操作。

在表单中使用双向数据绑定？

你可以用v-model 指令在表单 ,
</span></span>及<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;"><select></span></span>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。<br>注意: v-model 会忽略所有表单元素的.value、checked、selected<br>特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!</p></blockquote><p data-track="39">通过v-model实现数据绑定</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><div id="app"> 请输入文本：<input type="text" v-model="message">{{message}}  <select name="" id="" v-model="selected"> <option disabled value="">--请选择--</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> {{selected}}</div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> var vm = new Vue({ el:"#app", //Model:数据 data:{ message: "我是Vue" selected: "C" //默认下拉菜单选中为C }, methods:{//方法必须定义在Vue的method对象中 } });</script></code></pre><p data-track="41">v-bind和v-model区分</p><blockquote><p data-track="42"><span style="color: #555555; --tt-darkmode-color: #555555;">（1）v-bind是单项数据绑定，映射关系是Model->View,我们通过Model操作就可以实现视图的联动更新。</span></p><p data-track="43"><span style="color: #555555; --tt-darkmode-color: #555555;">格式：</span><strong><span style="color: #555555; --tt-darkmode-color: #555555;">v-bind:(props)="(message)"</span></strong></p><p data-track="44"><span style="color: #555555; --tt-darkmode-color: #555555;">props就是组件component的元素</span></p><p data-track="45"><span style="color: #555555; --tt-darkmode-color: #555555;">message就是vm中Data对象的数据</span></p><p data-track="46"><span style="color: #555555; --tt-darkmode-color: #555555;">绑定一个属性</span><span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;"><img v-bind:src="imagesrc"/></span></span></p><p data-track="47"><span style="color: #555555; --tt-darkmode-color: #555555;">（2）v-model是双向数据绑定，映射关系是 </span><strong><span style="color: #555555; --tt-darkmode-color: #555555;">View接受的数据,传给model,model的数据再传给view</span></strong><span style="color: #555555; --tt-darkmode-color: #555555;"> ，用于表单控件</span></p></blockquote><h1 class="pgc-h-arrow-right" data-track="48">5.Vue组件</h1><p data-track="49">通过component定义一个组件，component有两个元素：props(参数)、template(模板)</p><p data-track="50">组件<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">lyl</span></span>中的<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">v-bind</span></span>绑定了<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">props</span></span>属性中的参数</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><div id="app"><lyl v-for="item in items" v-bind:zujian="item"></lyl></div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script> //定义一个Vue组件component Vue.component("lyl",{ props: ['zujian'], template:'<li>{{zujian}}</li>' }) var vm = new Vue({ el:"#app", //Model:数据 data:{ items: ["西瓜","苹果","橘子"] } });</script></code></pre><h1 class="pgc-h-arrow-right" data-track="52">6.Axios异步通信</h1><h1 class="pgc-h-arrow-right" data-track="53">什么是Axios?</h1><blockquote><p data-track="54"><span style="color: #555555; --tt-darkmode-color: #555555;">Axios是一个开源的可以用在浏览器端和</span><span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">node.js</span></span>的异步通信框架，它的主要作用就是实现 <strong>AJAX</strong>异步通信，其功能特点如下：</p></blockquote><ul><li data-track="55">从浏览器中创建XMLHttpRequests</li><li data-track="56">从node.js 创建http请求</li><li data-track="57">支持Promise API[ JS中链式编程 ]拦截请求和响应</li><li data-track="58">转换请求数据和响应数据取消请求</li><li data-track="59">自动转换JSON数据</li><li data-track="60">客户端支持防御XSRF(跨站请求伪造)</li></ul><h1 class="pgc-h-arrow-right" data-track="61">为什么要使用Axios?</h1><p data-track="62">由于<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">Vue.js</span></span>是一个视图层框架并且作者（尤雨溪）严格准守SoC (关注度分离原则)，所以Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">vue-resource</span></span>的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery，因为它操作Dom太频繁!</p><p data-track="63">Axios的CDN引入：</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><script src="https://unpkg.com/axios/dist/axios.min.js"></script></code></pre><blockquote><p data-track="65"><span style="color: #555555; --tt-darkmode-color: #555555;">Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue<br>实例从创建到销毁的过程，就是生命周期。</span></p></blockquote><p data-track="66">实例测试：</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><div id="app"> <div>{{info.address.country}}</div> <div>{{info.name}}</div> <a v-bind:href="info.url">跳转</a></div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script type="text/javascript"> var vm = new Vue({ el:"#app", //data:是vm的属性，此处用的是data() data(){ return{ //请求返回的参数格式，必须和json字符串一样 info: { name: null, address: { street: null, city: null, country: null }, url:null } } }, mounted(){//钩子函数,链式编程,Es6新特性 axios.get('../data.json').then(response=>(this.info=response.data)) }, });</script></code></pre><h1 class="pgc-h-arrow-right" data-track="68">7.计算属性</h1><p data-track="69">计算出来的结果，保存在属性中（简单来说，就是能够将计算结果缓存起来的属性）</p><p data-track="70">内存中运行：虚拟DOM</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><div id="app"> <div>time:{{time()}}</div> <div>time1:{{time1}}</div></div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> var vm = new Vue({ el:"#app", //Model:数据 data:{ message:"你好" }, methods:{ time:function (){ return Date.now(); //返回一个时间戳 } }, computed:{//计算属性 time1:function (){ this.message; return Date.now(); } } });</script></code></pre><blockquote><p data-track="72"><span style="color: #555555; --tt-darkmode-color: #555555;">methods:定义方法,调用方法使用time()，需要带括号computed:定义计算属性，调用属性使用time1，不需要带括号; this.message 是为了能够让time1观察到数据变化而变化如何在方法中的值发生了变化，则缓存就会刷新! 可以在控制台使用vm.message="lyl" ,改变下数据的值，再次测试观察效果!</span></p></blockquote><h1 class="pgc-h-arrow-right" data-track="73">8.插槽slot</h1><p data-track="74">在vue.js中我们使用<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;"><slot></span></span>元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中;</p><p data-track="75">通过插槽<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;"><slot></span></span>的name属性进行值的绑定</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><div id="app"><todo> <todo-title slot="todo-title" v-bind:title="title"></todo-title> <todo-item slot="todo-item" v-for="item in items" v-bind:item="item"></todo-item></todo></div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> //slot插槽 Vue.component("todo",{ //通过slot中的name属性绑定标签中的slot template: `<div>`+ `<slot name="todo-title"></slot>`+ `<ul>\ <slot name="todo-item"></slot> </ul>`+ `</div>` }); //一个title组件，props中的参数要加引号 Vue.component("todo-title",{ props: ['title'], template: '<div>{{title}}</div>' }); //一个item组件 Vue.component("todo-item",{ props: ['item'], template: '<li>{{item}}</li>' }) var vm = new Vue({ el:"#app", data:{ title: "title:lyl测试", items:['java','python','C'] }, });</script></code></pre><h1 class="pgc-h-arrow-right" data-track="77">9.自定义事件内容分发</h1><p data-track="78">补充：</p><p data-track="79">（1）v-for可以遍历出数组的下标</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>v-for="(item,index) in items"</code></pre><p data-track="81">（2）组件中也可以有<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">methods：</span></span>对象</p><p data-track="82">（3）通过<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">this.$emit()</span></span>自定义事件内容分发</p><p data-track="83">（4）<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">v-on</span></span>等价于<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">@click</span></span></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><div id="app"> <todo> <todo-title slot="todo-title" v-bind:title="title"></todo-title> <todo-item slot="todo-item" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-on:remove_self="removeitems(index)"> </todo-item> </todo></div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> //slot插槽 Vue.component("todo",{ //通过slot中的name属性绑定标签中的slot template: `<div>`+ `<slot name="todo-title"></slot>`+ `<ul>\ <slot name="todo-item"></slot> </ul>`+ `</div>` }); //一个title组件，props中的参数要加引号 Vue.component("todo-title",{ props: ['title'], template: '<div>{{title}}</div>' }); //一个item组件 Vue.component("todo-item",{ props: ['item','index'], //组件只可以绑定组件内部自己的methods的方法，不能绑定vue对象的方法 template: '<li>索引：{{index}}---》{{item}} <button v-on:click="remove">删除</button></li>', methods: { remove:function (index){ //通过this.$emit 自定义事件分发,调用vue对象中的removeitems this.$emit('remove_self',index) } } }) var vm = new Vue({ el:"#app", data:{ title: "title:lyl测试", items:['java','python','C'] }, methods: { removeitems:function (index){ console.log("删除了"+this.items[index]+"成功") this.items.splice(index,1) //通过js的splice方法，从index开始，一次删除一个元素 } } });</script></code></pre><p data-track="85">自定义事件分发小结：</p><p data-track="86">（前端作为转接媒介）</p><p data-track="87">（1）在实现插槽的组件中可以调用自身的methods方法，但是无法调用Vue对象的methods方法</p><p data-track="88">（2）通过在组件的方法中,<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">this.$emit('remove_self',index)</span></span>实现事件转发</p><p data-track="89">（3）在组件的标签中，通过事件转发的方法<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">v-on:remove_self="removeitems(index)"</span></span>绑定到Vue对象中的methods方法</p><h1 class="pgc-h-arrow-right" data-track="90">第一个Vue-cli项目</h1><h1 class="pgc-h-arrow-right" data-track="91">1.什么是vue-cli?</h1><blockquote><p data-track="92"><span style="color: #555555; --tt-darkmode-color: #555555;">vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板;</span></p><p data-track="93"><span style="color: #555555; --tt-darkmode-color: #555555;">预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;</span></p></blockquote><p data-track="94">主要的功能：</p><ul><li data-track="95">统一的目录结构</li><li data-track="96">本地调试</li><li data-track="97">热部署</li><li data-track="98">单元测试</li><li data-track="99">集成打包上线</li></ul><h1 class="pgc-h-arrow-right" data-track="100">2.环境配置</h1><ul><li data-track="101"><strong>Node.js</strong></li></ul><blockquote><p data-track="102"><span style="color: #555555; --tt-darkmode-color: #555555;"><span>下载地址： <br>http://nodejs.cn/download/ 安装的时候一直下一步直到结束</span></span></p><p data-track="103"><span style="color: #555555; --tt-darkmode-color: #555555;">确认是否安装成功：</span></p><p data-track="104"><span style="color: #555555; --tt-darkmode-color: #555555;">在cmd中运行node -v命令，查看是否能够输出版本号在cmd中运行npm -v命令，查看是否能够输出版本号</span></p></blockquote><ul><li data-track="105"><strong>安装node.js淘宝镜像加速器（cnpm）</strong></li></ul><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code># -g 就是全局安装npm install cnpm -g# 或使用如下语句解决npm速度慢的问题，但是每次install都需要（妈发）npm install --registry=https://registry.npm.taobao.org</code></pre><ul><li data-track="107"><strong>安装vue-cli</strong></li></ul><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>cnpm instal1 vue-cli-g#测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpackvue list</code></pre><h1 class="pgc-h-arrow-right" data-track="109">2.2 第一个vue-cli应用程序</h1><ul><li data-track="110">找到一个项目路径(空文件夹)</li><li data-track="111">创建一个基于webpack模板的vue应用程序</li></ul><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>#1、首先需要进入到对应的目录 cd E:\study\Java\workspace\workspace_vue#2、这里的myvue是顶日名称，可以根据自己的需求起名vue init webpack myvue</code></pre><ul><li data-track="113">创建过程需要的操作</li><li data-track="114">一路选no</li></ul><blockquote><p data-track="115"><strong><span style="color: #555555; --tt-darkmode-color: #555555;">Project name</span></strong><span style="color: #555555; --tt-darkmode-color: #555555;">：项目名称，默认回车即可<br></span><strong><span style="color: #555555; --tt-darkmode-color: #555555;">Project description</span></strong><span style="color: #555555; --tt-darkmode-color: #555555;">：项目描述，默认回车即可<br></span><strong><span style="color: #555555; --tt-darkmode-color: #555555;">Author</span></strong><span style="color: #555555; --tt-darkmode-color: #555555;">：项目作者，默认回车即可<br></span><strong><span style="color: #555555; --tt-darkmode-color: #555555;">Install vue-router</span></strong><span style="color: #555555; --tt-darkmode-color: #555555;">：是否安装vue-router，选择n不安装（后期需要再手动添加）<br></span><strong><span style="color: #555555; --tt-darkmode-color: #555555;">Use ESLint to lint your code</span></strong><span style="color: #555555; --tt-darkmode-color: #555555;">:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)<br></span><strong><span style="color: #555555; --tt-darkmode-color: #555555;">Set up unit tests</span></strong><span style="color: #555555; --tt-darkmode-color: #555555;">:单元测试相关，选择n不安装（后期需要再手动添加）<br></span><strong><span style="color: #555555; --tt-darkmode-color: #555555;">Setupe2etests with Nightwatch</span></strong><span style="color: #555555; --tt-darkmode-color: #555555;">：单元测试相关，选择n不安装（后期需要再手动添加）<br></span><strong><span style="color: #555555; --tt-darkmode-color: #555555;">Should we run npm install for you after the,project has been created</span></strong><span style="color: #555555; --tt-darkmode-color: #555555;">:创建完成后直接初始化，选择n，我们手动执行；运行结果</span></p></blockquote><p data-track="116">当出现问题时，它会给出提示我们按照提示来就行</p><ul><li data-track="117">初始化并运行</li></ul><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>cd myvuenpm installnpm run dev</code></pre><blockquote><p data-track="119"><span style="color: #555555; --tt-darkmode-color: #555555;">访问localhost:8080即可</span></p></blockquote><h1 class="pgc-h-arrow-right" data-track="120">Webpack</h1><h1 class="pgc-h-arrow-right" data-track="121">什么是webpack?</h1><blockquote><p data-track="122"><span style="color: #555555; --tt-darkmode-color: #555555;">本质上,webpack是一个现代JavaScript应用程序的</span><strong><span style="color: #555555; --tt-darkmode-color: #555555;">静态模块打包器</span></strong><span style="color: #555555; --tt-darkmode-color: #555555;">(module<br>bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency<br>graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle.<br>Webpack是当下最热门的</span><strong><span style="color: #555555; --tt-darkmode-color: #555555;">前端资源模块化管理和打包工具</span></strong><span style="color: #555555; --tt-darkmode-color: #555555;">，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如CommonsJS.AMD、ES6、css、JSON、CoffeeScript、LESS等;</span></p></blockquote><h1 class="pgc-h-arrow-right" data-track="123">安装Webpack</h1><blockquote><p data-track="124"><span style="color: #555555; --tt-darkmode-color: #555555;">WebPack是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES 6、SASS、LESS、图片等都作为模块来处理和使用</span></p></blockquote><p data-track="125"><strong>安装</strong>：</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>npm install webpack -gnpm install webpack-cli -g </code></pre><p data-track="127">测试安装成功：</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>webpack -vwebpack-cli -v</code></pre><p data-track="129">配置：</p><p data-track="130">创建webpack .config.js配置文件</p><p data-track="131">entry: 入口文件，指定WebPack 用哪个文件作为项目的入口</p><p data-track="132">output:输出，指定WebPack把处理完成的文件放置到指定路径</p><p data-track="133">module:模块，用于处理各种类型的文件</p><p data-track="134">plugins:插件，如:热更新、代码重用等r</p><p data-track="135">resolve:设置路径指向</p><p data-track="136">watch:监听，用于设置文件改动后直接打包</p><ul><li data-track="137">创建项目</li></ul><blockquote><p data-track="138"><span style="color: #555555; --tt-darkmode-color: #555555;">在自己的目录中，新建文件夹webpack-study，然后用IDEA打开</span></p></blockquote><ul><li data-track="139">创建一个名为modules的目录，用于放置JS模块等资源文件</li><li data-track="140">在modules下创建模块文件hello.js</li></ul><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>//暴露一个方法：sayHiexports.sayHi = function(){ document.write("<div>Hello Webpack</div>");}</code></pre><ul><li data-track="142">在modules下创建一个名为main.js的入口文件main.js，用于打包时设置entry属性</li></ul><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>//require 导入一个模块，就可以调用这个模块中的方法了var hello = require("./hello");hello.sayHi();</code></pre><ul><li data-track="144">在项目目录下创建webpack.config.js配置文件，</li></ul><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>module.exports = { entry:"./modules/main.js", output:{ filename:"./js/bundle.js" }}</code></pre><ul><li data-track="146">使用webpack命令打包（命令行状态下），打包成功后会生成一个dist文件夹</li></ul><p data-track="147">打包：</p><blockquote><p data-track="148"><span style="color: #555555; --tt-darkmode-color: #555555;">说明：打包如果失败，就用管理员权限运行webpack</span></p></blockquote><ul><li data-track="149">在项目目录下创建HTML页面，index.html，通过script导入webpack打包后的JS文件</li></ul><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="./dist/js/bundel.js"></script></body></html></code></pre><p data-track="151">补充：</p><p data-track="152" class="syl-line-pure-english"><span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">webpack -watch</span></span></p><p data-track="153"><em>参数--watch 用于监听变化,如果要打包的东西有变化，就重新打包</em></p><h1 class="pgc-h-arrow-right" data-track="154">Vue-router路由</h1><p data-track="155">Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有:</p><ul><li data-track="156">嵌套的路由/视图表</li><li data-track="157">模块化的、基于组件的路由配置路由参数、查询、通配符</li><li data-track="158">基于Vue.js 过渡系统的视图过渡效果</li><li data-track="159">细粒度的导航控制</li><li data-track="160">带有自动激活的Css classt的链接</li><li data-track="161">HTML5历史模式或hash模式，在IE9中自动降级</li><li data-track="162">自定义的滚动条行为</li></ul><h1 class="pgc-h-arrow-right" data-track="163">安装</h1><ul><li data-track="164">基于第一个<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">vue-cli</span></span>进行测试学习；先查看node modules中是否存在vue-router, vue-router是一个插件包，所以我们还是需要用npm/cnpm来进行安装的</li></ul><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>npm install vue-router --save-dev</code></pre><ul><li data-track="166">如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能</li></ul><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>import Vue from 'vue'import VueRouter from 'vue-router' Vue.use(VueRouter);</code></pre><p data-track="168">问题解决：</p><p data-track="169">npm run dev时候提示好多警告，<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">Router is not found in vue-router</span></span>,并且无法加载出页面</p><p data-track="170"><strong>原因</strong>：vue-router的版本太高</p><p data-track="171"><strong>解决方案</strong>：更换低版本的vue-router</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>cnpm install vue-router@3.1.3 --save-dev</code></pre><h1 class="pgc-h-arrow-right" data-track="173">测试路由</h1><ul><li data-track="174">在src目录下新建<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">cpmponents</span></span>文件夹用于存放我们自己编写的组件</li><li data-track="175">定义自己的组件Content.vue、Main.vue</li></ul><p data-track="176" class="syl-line-pure-english"><strong>Content.vue</strong></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><template><h1>内容页</h1></template> <script>export default { name: "Content"}</script> <style scoped> </style></code></pre><p data-track="178" class="syl-line-pure-english"><strong>Main.vue</strong></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><template><h1>首页</h1></template> <script>export default { name: "Main"}</script> <style scoped> </style></code></pre><ul><li data-track="180">新建router文件夹，用于存放路由，在文件夹下编写index.js，用于配置路由</li></ul><p data-track="181" class="syl-line-pure-english"><strong>index.js</strong></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>import Vue from 'vue'//导入路由插件import Router from "vue-router";//导入自定义的组件import Content from "../components/Content";import Main from "../components/Main";//安装路由Vue.use(Router);//配置导出路由export default new Router({ routes:[ { //路由路径 path:'/content', name:'content', //跳转的组件 component:Content }, { path:'/main', name:'main', component: Main } ]});</code></pre><ul><li data-track="183">在main.js中配置路由（import路由的时候路径写到文件夹即可，因为写的是index.js会被默认扫描）</li></ul><p data-track="184" class="syl-line-pure-english"><strong>main.js</strong></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>import Vue from 'vue'import App from './App'import router from './router' //自动扫描里面的路由配置Vue.config.productionTip = false; //显示声明引用VueRouternew Vue({ el: '#app', //配置路由 router, components: { App }, template: '<App/>'})</code></pre><ul><li data-track="186">在<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">app.vue</span></span>中使用路由</li></ul><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><template> <div id="app">  <router-link to="/main">首页</router-link> <router-link to="/content">内容页</router-link> <router-view></router-view> </div></template><script>export default { name: 'App',}</script><style>#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style></code></pre><ul><li data-track="188">通过命令<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">npm run dev</span></span>运行，通过浏览器进行访问</li></ul><h1 class="pgc-h-arrow-right" data-track="189">Vue+Element小例子</h1><h1 class="pgc-h-arrow-right" data-track="190">1.创建工程</h1><ul><li data-track="191">创建一个名为hello-vue的工程<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">vue init webpack hello-vue</span></span></li><li data-track="192">安装依赖，我们需要安装vue-router、element-ui、sass-loader、node-sass四个插件</li></ul><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>#进入工程目录cd hello-vue#安装vue-routern npm install vue-router --save-dev#安装element-uinpm i element-ui -S#安装依赖npm install# 安装SASS加载器cnpm install sass-loader node-sass --save-dev#启功测试npm run dev</code></pre><p data-track="194"><strong>npm命令说明</strong>：</p><ul><li data-track="195">npm install moduleName：安装模块到项目目录下</li><li data-track="196">npm install -g moduleName：-g的意思是将模块安装到全局，具体安装到磁盘哪个位置要看npm</li><li data-track="197">config prefix的位置</li><li data-track="198">npm install -save moduleName：–save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写</li><li data-track="199">npm install -save-dev moduleName:–save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写</li></ul><p data-track="200">问题解决：</p><p data-track="201">在最后<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">npm run dev</span></span>的时候，出现sass版本问题</p><p data-track="202">解决方案：将<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">package.json</span></span>文件中的<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">"sass-loader": "^7.3.1"</span></span>版本改成7.3.1</p><p data-track="203">重新执行以下命令：</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>npm uninstall node-sassnpm i -D sass</code></pre><ul><li data-track="205">用IDEA打开新建的项目，在src下新建routers、views文件夹</li><li data-track="206">说明：</li><ul><li data-track="207">assets：用于存放资源文件</li><li data-track="208">components：用于存放Vue功能组件</li><li data-track="209">views：用于存放Vue视图组件</li><li data-track="210">router：用于存放vue-router配置</li></ul><li data-track="211">在views文件夹下新建Login.vue和Main.vue组件</li></ul><p data-track="212" class="syl-line-pure-english"><strong>Login.vue</strong></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><template> <div> <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box"> <h3 class="login-title">欢迎登录</h3> <el-form-item label="账号" prop="username"> <el-input type="text" placeholder="请输入账号" v-model="form.username"/> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" placeholder="请输入密码" v-model="form.password"/> </el-form-item> <el-form-item> <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button> </el-form-item> </el-form> <el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <span>请输入账号和密码</span> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="dialogVisible = false">确定</el-button> </span> </el-dialog> </div></template><script>export default { name: "Login", data() { return { form: { username: '', password: '' }, //表单验证，需要在el-form-item 元素中增加prop 属性 rules: { username: [ {required: true, message: " 账号不可为空", trigger: 'blur'} ], password: [ {required: true, message: " 密码不可为空 ", trigger: 'blur'} ] },//对话框显示和隐藏 dialogVisible: false } }, methods: { onSubmit(formName) {//为表单绑定验证功能 this.$refs [formName].validate((valid) => { if (valid) {//使用vue-router路由到指定页面，该方式称之为编程式导航 this.$router.push("/main"); } else { this.dialogVisible = true; return false; } }); } }}</script><style lang="scss" scoped>.login-box { border: 1px solid #DCDFE6; width: 350px; margin: 180px auto; padding: 35px 35px 15px 35px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 0 0 25px #909399;} .login-title { text-align: center; margin: 0 auto 40px auto; color: #303133;}</style></code></pre><p data-track="214" class="syl-line-pure-english"><strong>Main.vue</strong></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><template><h1>主页</h1></template> <script>export default { name: "Main"}</script> <style scoped> </style></code></pre><ul><li data-track="216">在routers文件夹下新建index.js文件</li></ul><p data-track="217" class="syl-line-pure-english"><strong>index.js</strong></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>import Vue from 'vue'import Router from 'vue-router'import Login from "../views/Login";import Main from "../views/Main"; Vue.use(Router); export default new Router({ routes: [ { path : '/main', name : 'main', component: Main }, { path: '/login', name: 'login', component:Login } ]});</code></pre><ul><li data-track="219">在main.js中配置路由</li></ul><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>import Vue from 'vue'import App from './App'import router from './routers' import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.config.productionTip = false Vue.use(router)Vue.use(ElementUI)new Vue({ el: '#app', router, render: h => h(App) //ElementUI })</code></pre><h1 class="pgc-h-arrow-right" data-track="221">2.路由嵌套</h1><ul><li data-track="222">新建views下的子组件，user/List.vue、和/user/Profile.vue</li></ul><p data-track="223" class="syl-line-pure-english"><strong>List.vue</strong></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><template><h1>用户列表</h1></template> <script>export default { name: "List"}</script> <style scoped> </style></code></pre><p data-track="225" class="syl-line-pure-english"><strong>Profile.vue</strong></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><template><h1>个人信息</h1></template> <script>export default { name: "Profile"}</script> <style scoped> </style></code></pre><p data-track="227">通过在路由配置组件中配置子元素children属性，实现嵌套</p><p data-track="228" class="syl-line-pure-english"><strong>index.js</strong></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>import Vue from 'vue'import Router from 'vue-router'import Login from "../views/Login";import Main from "../views/Main";import Profile from "../views/user/Profile";import List from "../views/user/List"; Vue.use(Router); export default new Router({ routes: [ { path : '/main', name : 'main', component: Main, children:[ //子元素嵌套 { path : '/user/list', name : 'list', component: List }, { path : '/user/profile', name : 'profile', component: Profile } ] }, { path: '/login', name: 'login', component:Login } ]});</code></pre><p data-track="230">更新Main.vue中的内容为侧边栏样式内容</p><p data-track="231" class="syl-line-pure-english"><strong>Main.vue</strong></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><template> <div> <el-container> <el-aside width="200px"> <el-menu :default-openeds="['1']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template> <el-menu-item-group> <el-menu-item index="1-1">  <router-link to="/user/profile">个人信息</router-link> </el-menu-item> <el-menu-item index="1-2">  <router-link to="/user/list">用户列表</router-link> </el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template> <el-menu-item-group> <el-menu-item index="2-1">分类管理</el-menu-item> <el-menu-item index="2-2">内容列表</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>个人信息</el-dropdown-item> <el-dropdown-item>退出登录</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <el-main>  <router-view /> </el-main> </el-container> </el-container> </div></template><script>export default { name: "Main"}</script><style scoped lang="scss">.el-header { background-color: #B3C0D1; color: #333; line-height: 60px;}.el-aside { color: #333;}</style></code></pre><h1 class="pgc-h-arrow-right" data-track="233">3.参数传递及重定向</h1><h1 class="pgc-h-arrow-right" data-track="234">参数传递方法1：</h1><p data-track="235">前端通过params传递，中间通过router接收，通过<span style="color: #E83E8C; --tt-darkmode-color: #E83E8C;"><span style="background-color: #F6F6F6; --tt-darkmode-bgcolor: #1B1B1B;">$router.params.id</span></span>展示</p><p data-track="236">（1）前端通过to属性传递参数(<strong>注意</strong>：要对to属性进行双向绑定)</p><p data-track="237">name传组件名，params传递参数，需要对象:v-bind</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><router-link v-bind:to="{name: 'profile',params:{id:1}}">个人信息</router-link></code></pre><p data-track="239">（2）通过路由(index.js)接收</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>routes: [ { path : '/main', name : 'main', component: Main, children:[ { path : '/user/list', name : 'list', component: List }, { path : '/user/profile:id', //通过id接收(如果使用name传参 //此处的:id可以不写，但是在地址栏中没办法改变id 的值) name : 'profile', component: Profile } ] }, { path: '/login', name: 'login', component:Login } ]</code></pre><p data-track="241">（3）在Profile.vue中显示传递的参数</p><p data-track="242"><strong>注意</strong>：所有的元素不能直接在根节点下，必须至少有一个div标签包裹，否则出错</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><template> <div> <h1>个人信息</h1> {{$route.params.id}} </div></template></code></pre><h1 class="pgc-h-arrow-right" data-track="244">参数传递方法2：</h1><p data-track="245">使用props<strong>减少耦合</strong></p><p data-track="246">（1）前端通过to属性传递参数(<strong>注意</strong>：要对to属性进行v-bind绑定)</p><p data-track="247">name传组件名，params传递参数，需要对象:v-bind</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><router-link :to="{name: 'profile',params:{id:1,name:'望穿先生',age:'22'}}">个人信息</router-link></code></pre><p data-track="249">（2）通过路由(index.js)接收</p><p data-track="250">在需要接收参数的路由后，新增属性props:true</p><p data-track="251" class="syl-line-pure-english"><strong>indes.js</strong></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>routes: [ { path : '/main', name : 'main', component: Main, children:[ { path : '/user/list', name : 'list', component: List }, { path : '/user/profile', name : 'profile', component: Profile, props: true } ] }, { path: '/login', name: 'login', component:Login } ]</code></pre><p data-track="253">（3）在Profile.vue中显示传递的参数</p><p data-track="254">需要的Profile.vue接收参数并且在export中增加props属性</p><p data-track="255"><strong>注意</strong>：所有的元素不能直接在根节点下，必须至少有一个div标签包裹，否则出错</p><p data-track="256" class="syl-line-pure-english"><strong>Profile.vue</strong></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><template> <div> <h1>个人信息</h1> <ul> <li>id:{{id}}</li> <li>姓名：{{name}}</li> <li>年龄：{{age}}</li> </ul> </div></template> <script>export default { props:['id','name','age'], name: "Profile"}</script> </code></pre><h1 class="pgc-h-arrow-right" data-track="258">重定向</h1><p data-track="259">Vue 中的重定向是作用在路径不同但组件相同的情况</p><ul><li data-track="260">在router/index.js配置重定向路径</li></ul><p data-track="261" class="syl-line-pure-english"><strong>index.js</strong></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>routes: [ { path : '/main', name : 'main', component: Main, children:[ { path : '/user/list', name : 'list', component: List }, { path : '/user/profile:id', name : 'profile', component: Profile, props : true } ] }, { path: '/login', name: 'login', component:Login }, { path: '/gohome', redirect : '/main' }]</code></pre><p data-track="263">在前台加入链接</p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><router-link to="/gohome">返回首页</router-link></code></pre><h1 class="pgc-h-arrow-right" data-track="265">路由模式与404</h1><p data-track="266">路由模式有两种</p><ul><li data-track="267">hash：路径带 # 符号，如 http://localhost/#/login</li><li data-track="268">history：路径不带 # 符号，如 http://localhost/login</li></ul><p data-track="269"><strong>修改路由配置</strong></p><p data-track="270" class="syl-line-pure-english"><strong>index.js</strong></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>export default new Router({ mode:'history', routes: [] )}</code></pre><blockquote><p data-track="272"><span style="color: #555555; --tt-darkmode-color: #555555;">在路由的配置中修改</span></p></blockquote><h1 class="pgc-h-arrow-right" data-track="273">路由钩子</h1><p data-track="274">除了之前的钩子函数还存在两个钩子函数</p><p data-track="275">beforeRouteEnter：在进入路由前执行<br>beforeRouteLeave：在离开路由前执行</p><ul><li data-track="276">在 Profile.vue 使用</li></ul><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><script> export default { name: "UserProfile", beforeRouteEnter: (to, from, next) => { console.log("准备进入个人信息页"); next(); }, beforeRouteLeave: (to, from, next) => { console.log("准备离开个人信息页"); next(); } }</script></code></pre><blockquote><p data-track="278"><span style="color: #555555; --tt-darkmode-color: #555555;">参数说明：</span></p><p data-track="279"><span style="color: #555555; --tt-darkmode-color: #555555;">to：路由将要跳转的路径信息</span></p><p data-track="280"><span style="color: #555555; --tt-darkmode-color: #555555;">from：路径跳转前的路径信息<br>next：路由的控制参数<br>next() 跳入下一个页面<br>next(’/path’) 改变路由的跳转方向，使其跳到另一个路由<br>next(false) 返回原来的页面<br>next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例</span></p></blockquote><p data-track="281">在钩子函数中进行异步请求</p><ul><li data-track="282">安装Axios</li></ul><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>cnpm install --save vue-axios</code></pre><ul><li data-track="284">main.js引用 Axios</li></ul><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)</code></pre><ul><li data-track="286">准备数据</li></ul><p data-track="287" class="syl-line-pure-english"><strong>data.json</strong></p><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>{ "name": "望穿先生", "url": "http://baidu.com", "page": "1", "isNonProfit": "true", "address": { "street": "含光门", "city": "陕西西安", "country": "中国" }, "links": [ { "name": "B站", "url": "https://www.bilibili.com/" }, { "name": "4399", "url": "https://www.4399.com/" }, { "name": "百度", "url": "https://www.baidu.com/" } ]}</code></pre><blockquote><p data-track="289"><span style="color: #555555; --tt-darkmode-color: #555555;">说明：只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下</span></p></blockquote><ul><li data-track="290">在 beforeRouteEnter 中进行异步请求</li></ul><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><script> export default { name: "UserProfile", beforeRouteEnter: (to, from, next) => { console.log("准备进入个人信息页"); next(vm => { //进入路由之前执行getData方法 vm.getData() }); }, beforeRouteLeave: (to, from, next) => { console.log("准备离开个人信息页"); next(); }, //axios methods: { getData: function () { this.axios({ method: 'get', url: 'http://localhost:8080/static/mock/data.json' }).then(function (response) { console.log(response) }) } } }</script></code></pre><ul><li data-track="292">测试</li></ul><p data-track="293"><span style="color: #494949; --tt-darkmode-color: #9D9D9D;"><span>本文来自博客园，作者：望穿先生，转载请注明原文链接：<br>https://www.cnblogs.com/wangchuanxiansheng/p/16128193.html</span></span></p></div> <div class="clearfix mb10"> <div class="share fr"> <div class="social-share mb20 ta-c" data-initialized="true"> <a href="#" class="social-share-icon iconfont icon-weibo"></a> <a href="#" class="social-share-icon iconfont icon-qq"></a> <a href="#" class="social-share-icon iconfont icon-wechat"></a> <a href="#" class="social-share-icon iconfont icon-qzone"></a> </div> <script src="http://www.cshd18.com/zb_users/theme/tx_hao/script/social-share.min.js"></script> </div> <div class="info-tag"> <a href="http://www.cshd18.com/tags-151.html" title="查看更多axios.min.js内容" rel="tag" target="_blank">axios.min.js</a> </div> </div> <div class="info-next"> <ul class="row"> <li class="col-12 col-m-24 mb10">上一篇：<a href="http://www.cshd18.com/post/2692.html" title="SpringBoot 接口加解密全过程详解">SpringBoot 接口加解密全过程详解</a></li> <li class="col-12 col-m-24 ta-r mb10">下一篇：<a href="http://www.cshd18.com/post/2694.html" title="webpack基础、分包大揭秘">webpack基础、分包大揭秘</a></li> </ul> </div> </div> <h2 class="tx-title">相关推荐</h2> <div class="home-news"> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.cshd18.com/post/2804.html" title="法拍房「捡漏」陷阱中，都是刚需们的血泪" class="f-black" target="_blank">法拍房「捡漏」陷阱中，都是刚需们的血泪</a></dt> <dd class="news-txt"> <p class="f-gray f-13">文|镜相工作室，作者|李丹，编辑丨卢枕买法拍房的人越来越多了。2024年全国住宅类法拍房挂拍31.9万套，成交11.7万套。而在两年前，挂拍数相差无几，成交还只有8.1万套。当阿里法拍房五年激...</p> </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.cshd18.com/post/2803.html" title="睡后收入新神话:90后程序员靠DEEPSEEK躺赚百万?" class="f-black" target="_blank">睡后收入新神话:90后程序员靠DEEPSEEK躺赚百万?</a></dt> <dd class="news-txt"> <p class="f-gray f-13">凌晨四点的杭州未来科技城，27岁程序员陈墨的支付宝响起提示音——这是他开发的AI情感咨询机器人自动完成第89单服务，当日收益突破1.2万元。这个基于DEEPSEEK模型打造的"赛博月老"，正在批量制造...</p> </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.cshd18.com/post/2802.html" title="当00后也变成打工人，还会认真谈恋爱吗?" class="f-black" target="_blank">当00后也变成打工人，还会认真谈恋爱吗?</a></dt> <dd class="news-txt"> <p class="f-gray f-13">当代年轻人的爱情里，总是会有以下这些场景：在家里被催婚，在约会app上左滑右滑地徘徊，又或者在陌生的环境里等待不期而遇。似乎比真爱更令人失落的，是一种现代人孤岛式的伤感。在专题“预制爱情”中，《新周刊...</p> </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.cshd18.com/post/2801.html" title="我在冬天的上海，被汉王的办公本救了一命?" class="f-black" target="_blank">我在冬天的上海，被汉王的办公本救了一命?</a></dt> <dd class="news-txt"> <p class="f-gray f-13">这老祖宗啊，说得还真没错。人到年末，工作上的破事就一箩筐，事情一多，感觉连血条都短了一大截。你敢相信，今天早上起床的时候，我看着镜子里那张有点认不出来人形的脸，那副垂头丧气的样子，属于是整个人从上到下...</p> </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.cshd18.com/post/2800.html" title="老司机程序员用到的各种优秀资料、神器及框架整理" class="f-black" target="_blank">老司机程序员用到的各种优秀资料、神器及框架整理</a></dt> <dd class="news-txt"> <p class="f-gray f-13">作者：欧巴冰冰链接：https://www.jianshu.com/p/d74934b49ba3目录资料篇技术站点...</p> </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.cshd18.com/post/2799.html" title="聪明人都在教你用Deep Seek赚钱?不!他们只想“割韭菜”。" class="f-black" target="_blank">聪明人都在教你用Deep Seek赚钱?不!他们只想“割韭菜”。</a></dt> <dd class="news-txt"> <p class="f-gray f-13">当“聪明人”开始用DeepSeek教你赚钱时，请先捂住钱包——因为他们的“聪明”，不过是把镰刀磨得更快，韭菜割得更响。第一步：制造焦虑，贩卖“时代抛弃论”。“不懂AI的人，正在被淘汰！”“某大厂裁员5...</p> </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.cshd18.com/post/2798.html" title="我有一种紧迫感，去呈现社会转型中的思考|专访李睿珺" class="f-black" target="_blank">我有一种紧迫感，去呈现社会转型中的思考|专访李睿珺</a></dt> <dd class="news-txt"> <p class="f-gray f-13">李睿珺可能是当代最受关注的青年导演之一。对乡村生活的关注是李睿珺创作的一大主题。《老驴头》《告诉他们，我乘白鹤去了》《家在水草丰茂的地方》对这一主题都有不同程度的体现。身为创作者，李睿珺的思考一直在持...</p> </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.cshd18.com/post/2797.html" title="阿里云云效 vs 腾讯云CODING，DevOps孰强孰弱?" class="f-black" target="_blank">阿里云云效 vs 腾讯云CODING，DevOps孰强孰弱?</a></dt> <dd class="news-txt"> <p class="f-gray f-13">编辑导语：DevOps这个话题在IT、开发等领域是相对热门的，它意味着开发运维一体化，是推动业务发展与自动化交付的有效方式。国内便有不少DevOps平台可供企业使用。那么这些DevOps平台目前的发展...</p> </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.cshd18.com/post/2796.html" title="所有小人书目录，以及手机观看截图" class="f-black" target="_blank">所有小人书目录，以及手机观看截图</a></dt> <dd class="news-txt"> <p class="f-gray f-13">单双本连环画1-500连环画_B型美猴王（24册）连环画_一千零一日的故事（10册）连环画_一颗铜纽扣（3册）连环画_丁丁历险记（1-12册）...</p> </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.cshd18.com/post/2795.html" title="瞧，布鲁范德又在一本正经地胡说八道" class="f-black" target="_blank">瞧，布鲁范德又在一本正经地胡说八道</a></dt> <dd class="news-txt"> <p class="f-gray f-13">作者：孙欣祺1996年4月，在那个互联网尚不发达的年代，有一则网络流言引起不少美国人的关注：犹他大学的布鲁范德教授是不是去世了？刚刚办完退休手续的扬·哈罗德·布鲁范德亲自回复：“报道属实。本条信息发送...</p> </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.cshd18.com/post/2794.html" title="“种草经济”种出了什么?" class="f-black" target="_blank">“种草经济”种出了什么?</a></dt> <dd class="news-txt"> <p class="f-gray f-13">每天，有近400万篇笔记，在小红书上种草“诗与远方”。每小时，有超过1875万人在小红书搜索，求解“柴米油盐”。“种草”一词，源自社交媒体上看到他人分享，产生好感和想要亲自尝试的想法。一件心仪好物，一...</p> </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.cshd18.com/post/2793.html" title="对Http Rest API接口设计和API治理管控的思考" class="f-black" target="_blank">对Http Rest API接口设计和API治理管控的思考</a></dt> <dd class="news-txt"> <p class="f-gray f-13">作者：人月神话，新浪博客同名简介：多年SOA规划建设，私有云PaaS平台架构设计经验，长期从事一线项目实践在前面关于微服务方面的文章里面提到，对于多个微服务模块间往往都是以轻量的HttpRestA...</p> </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.cshd18.com/post/2792.html" title="一部汇辑有关吕洞宾之事迹、神话传说及著作《吕祖全书》" class="f-black" target="_blank">一部汇辑有关吕洞宾之事迹、神话传说及著作《吕祖全书》</a></dt> <dd class="news-txt"> <p class="f-gray f-13">0957-吕祖全书(古本）...</p> </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.cshd18.com/post/2791.html" title="塞林格遗稿出版谜案:他并非完全拒斥出版" class="f-black" target="_blank">塞林格遗稿出版谜案:他并非完全拒斥出版</a></dt> <dd class="news-txt"> <p class="f-gray f-13">今年是J·D·塞林格诞辰一百周年，塞林格之子、塞林格基金会负责人马特·塞林格（MattSalinger）首次访华，进行了一系列讲座和对谈活动。在他的指导修订下，译林出版社于2018年末推出了塞林格作...</p> </dd> </dl> <dl class="news-box clearfix pd15"> <dt class="f-20 mb10"><a href="http://www.cshd18.com/post/2790.html" title="程序员十大层次，你在第几层" class="f-black" target="_blank">程序员十大层次，你在第几层</a></dt> <dd class="news-txt"> <p class="f-gray f-13">大家好，我是柠檬哥，专注编程知识分享。欢迎关注@程序员柠檬橙，编程路上不迷路，私信发送以下关键字获取编程资源：...</p> </dd> </dl> </div> </div> <div class="side-box col-6 col-m-24 col2-"> <dl class="side-hot"> <dt>一周热门</dt> <dd> <ul> <li> <a href="http://www.cshd18.com/post/1317.html" title="MySql中json类型数据的查询以及在MyBatis-Plus中的使用" target="_blank"> <h2 class="f-15">MySql中json类型数据的查询以及在MyBatis-Plus中的使用</h2> </a> </li> <li> <a href="http://www.cshd18.com/post/1447.html" title="开源库libmodbus的用法" target="_blank"> <h2 class="f-15">开源库libmodbus的用法</h2> </a> </li> <li> <a href="http://www.cshd18.com/post/1502.html" title="亿图图示免费VIP会员兑换码激活码礼品券" target="_blank"> <h2 class="f-15">亿图图示免费VIP会员兑换码激活码礼品券</h2> </a> </li> <li> <a href="http://www.cshd18.com/post/1989.html" title="广联达终于出免费造价软件了，这五款真好用，准确率高达100%" target="_blank"> <h2 class="f-15">广联达终于出免费造价软件了，这五款真好用，准确率高达100%</h2> </a> </li> <li> <a href="http://www.cshd18.com/post/1701.html" title="配置GitLab流水线和门禁系统" target="_blank"> <h2 class="f-15">配置GitLab流水线和门禁系统</h2> </a> </li> <li> <a href="http://www.cshd18.com/post/292.html" title="姓氏头像:缪、卢、茹、生、梁、邱、饶、郭、薄、宗、庄、万…" target="_blank"> <h2 class="f-15">姓氏头像:缪、卢、茹、生、梁、邱、饶、郭、薄、宗、庄、万…</h2> </a> </li> <li> <a href="http://www.cshd18.com/post/1080.html" title="推荐五个优秀的富文本编辑器富文本编辑器app" target="_blank"> <h2 class="f-15">推荐五个优秀的富文本编辑器富文本编辑器app</h2> </a> </li> <li> <a href="http://www.cshd18.com/post/796.html" title="BIOS/UEFI模式下如何分区 uefi分区教程" target="_blank"> <h2 class="f-15">BIOS/UEFI模式下如何分区 uefi分区教程</h2> </a> </li> <li> <a href="http://www.cshd18.com/post/1298.html" title="windows下安装大模型加速包flash-attn" target="_blank"> <h2 class="f-15">windows下安装大模型加速包flash-attn</h2> </a> </li> <li> <a href="http://www.cshd18.com/post/768.html" title="如何生成 PEM 格式的 SSH 密钥 ? pem生成key" target="_blank"> <h2 class="f-15">如何生成 PEM 格式的 SSH 密钥 ? pem生成key</h2> </a> </li> </ul> </dd> </dl> <dl class="function" id="divPrevious"> <dt class="function_t">最近发表</dt><dd class="function_c"> <ul><li><a title="法拍房「捡漏」陷阱中，都是刚需们的血泪" href="http://www.cshd18.com/post/2804.html">法拍房「捡漏」陷阱中，都是刚需们的血泪</a></li> <li><a title="睡后收入新神话:90后程序员靠DEEPSEEK躺赚百万?" href="http://www.cshd18.com/post/2803.html">睡后收入新神话:90后程序员靠DEEPSEEK躺赚百万?</a></li> <li><a title="当00后也变成打工人，还会认真谈恋爱吗?" href="http://www.cshd18.com/post/2802.html">当00后也变成打工人，还会认真谈恋爱吗?</a></li> <li><a title="我在冬天的上海，被汉王的办公本救了一命?" href="http://www.cshd18.com/post/2801.html">我在冬天的上海，被汉王的办公本救了一命?</a></li> <li><a title="老司机程序员用到的各种优秀资料、神器及框架整理" href="http://www.cshd18.com/post/2800.html">老司机程序员用到的各种优秀资料、神器及框架整理</a></li> <li><a title="聪明人都在教你用Deep Seek赚钱?不!他们只想“割韭菜”。" href="http://www.cshd18.com/post/2799.html">聪明人都在教你用Deep Seek赚钱?不!他们只想“割韭菜”。</a></li> <li><a title="我有一种紧迫感，去呈现社会转型中的思考|专访李睿珺" href="http://www.cshd18.com/post/2798.html">我有一种紧迫感，去呈现社会转型中的思考|专访李睿珺</a></li> <li><a title="阿里云云效 vs 腾讯云CODING，DevOps孰强孰弱?" href="http://www.cshd18.com/post/2797.html">阿里云云效 vs 腾讯云CODING，DevOps孰强孰弱?</a></li> <li><a title="所有小人书目录，以及手机观看截图" href="http://www.cshd18.com/post/2796.html">所有小人书目录，以及手机观看截图</a></li> <li><a title="瞧，布鲁范德又在一本正经地胡说八道" href="http://www.cshd18.com/post/2795.html">瞧，布鲁范德又在一本正经地胡说八道</a></li> </ul> </dd> </dl> <dl class="function" id="divTags"> <dt class="function_t">标签列表</dt><dd class="function_c"> <ul><li><a title="mydisktest_v298" href="http://www.cshd18.com/tags-11.html">mydisktest_v298<span class="tag-count"> (34)</span></a></li> <li><a title="document.appendchild" href="http://www.cshd18.com/tags-14.html">document.appendchild<span class="tag-count"> (35)</span></a></li> <li><a title="头像打包下载" href="http://www.cshd18.com/tags-15.html">头像打包下载<span class="tag-count"> (61)</span></a></li> <li><a title="acmecadconverter_8.52绿色版" href="http://www.cshd18.com/tags-18.html">acmecadconverter_8.52绿色版<span class="tag-count"> (39)</span></a></li> <li><a title="word文档批量处理大师破解版" href="http://www.cshd18.com/tags-47.html">word文档批量处理大师破解版<span class="tag-count"> (36)</span></a></li> <li><a title="server2016安装密钥" href="http://www.cshd18.com/tags-50.html">server2016安装密钥<span class="tag-count"> (33)</span></a></li> <li><a title="mysql 昨天的日期" href="http://www.cshd18.com/tags-55.html">mysql 昨天的日期<span class="tag-count"> (37)</span></a></li> <li><a title="parsevideo" href="http://www.cshd18.com/tags-65.html">parsevideo<span class="tag-count"> (33)</span></a></li> <li><a title="个人网站源码" href="http://www.cshd18.com/tags-66.html">个人网站源码<span class="tag-count"> (37)</span></a></li> <li><a title="centos7.4下载" href="http://www.cshd18.com/tags-70.html">centos7.4下载<span class="tag-count"> (33)</span></a></li> <li><a title="xlsx.full.min.js下载" href="http://www.cshd18.com/tags-71.html">xlsx.full.min.js下载<span class="tag-count"> (32)</span></a></li> <li><a title="mysql 查询今天的数据" href="http://www.cshd18.com/tags-81.html">mysql 查询今天的数据<span class="tag-count"> (34)</span></a></li> <li><a title="intouch2014r2sp1永久授权" href="http://www.cshd18.com/tags-82.html">intouch2014r2sp1永久授权<span class="tag-count"> (36)</span></a></li> <li><a title="先锋影音源资2019" href="http://www.cshd18.com/tags-84.html">先锋影音源资2019<span class="tag-count"> (35)</span></a></li> <li><a title="jdk1.8.0_191下载" href="http://www.cshd18.com/tags-96.html">jdk1.8.0_191下载<span class="tag-count"> (33)</span></a></li> <li><a title="axure9注册码" href="http://www.cshd18.com/tags-98.html">axure9注册码<span class="tag-count"> (33)</span></a></li> <li><a title="pts/1" href="http://www.cshd18.com/tags-105.html">pts/1<span class="tag-count"> (33)</span></a></li> <li><a title="spire.pdf 破解版" href="http://www.cshd18.com/tags-108.html">spire.pdf 破解版<span class="tag-count"> (35)</span></a></li> <li><a title="shiro jwt" href="http://www.cshd18.com/tags-132.html">shiro jwt<span class="tag-count"> (35)</span></a></li> <li><a title="sklearn中文手册pdf" href="http://www.cshd18.com/tags-133.html">sklearn中文手册pdf<span class="tag-count"> (35)</span></a></li> <li><a title="itextsharp使用手册" href="http://www.cshd18.com/tags-134.html">itextsharp使用手册<span class="tag-count"> (33)</span></a></li> <li><a title="凯立德2012夏季版懒人包" href="http://www.cshd18.com/tags-135.html">凯立德2012夏季版懒人包<span class="tag-count"> (34)</span></a></li> <li><a title="反恐24小时电话铃声" href="http://www.cshd18.com/tags-143.html">反恐24小时电话铃声<span class="tag-count"> (33)</span></a></li> <li><a title="冒险岛代码查询器" href="http://www.cshd18.com/tags-149.html">冒险岛代码查询器<span class="tag-count"> (34)</span></a></li> <li><a title="128*128png图片" href="http://www.cshd18.com/tags-153.html">128*128png图片<span class="tag-count"> (34)</span></a></li> </ul> </dd> </dl> </div> </div> </div> </div> <div class="footer"> <div class="wide ta-c f-12"> </div> </div> <div class="fixed-box "> <ul> <li class="pchide wapflex"><a href="http://www.cshd18.com/"><i class="fa fa-home"></i> 首页</a></li> <li><a href="http://www.cshd18.com/?shoulu" title="收录申请" target="_blank"><i class="fa fa-chain-broken mr5"></i>收录</a></li> <li><span class="gotop"><i class="fa fa-caret-up mr5"></i> 顶部</span></li> </ul> </div> <script src="http://www.cshd18.com/zb_users/theme/tx_hao/script/txcstx.min.js?v=2024-11-17"></script> </body> </html>

Vue快速入门

1.什么是MVVM?

2.第一个Vue项目

3.Vue基本语法

v-bind

v-if、v-else

我是true

我是flase

v-for

methods

4.Vue的双向绑定

什么是双向数据绑定？

为什么要实现数据的双向绑定？

在表单中使用双向数据绑定？