史上最详细VUE2.0全套demo讲解 基础篇

   <p style="text-align:center"><img src="https://simg.open-open.com/show/fff25494a7be889bcc10cf56b4f18e3b.jpg"></p>    <p>一开始在vue1.0的时候我就开始关注掘金的vue专栏，但是一直给我一种感受，真正能静下心来给读者写好每一个细讲，每一个讲解点，我觉得是最重要的，虽然我没有什么能力给大家带来像iview,mint ui等一系列大牛的基础vue带来的ui框架，但是我相信通过我自己一点一点的积累，自己如何去入门一个mvvm框架的时候，慢慢用上所有最常用的api这都是一个积累的过种，这也是我在掘金的第一篇，我只想写一个大家所有所期望的东西</p>    <p>列一个清单吧，其实入门就是基础，如何入门我下面总结一下我展示结的流程，用心去给大家写一个就像我标题写的史上最详细VUE2.0最详细全套讲解（基础篇），听了小编的建议分多次写，把每一细讲透彻讲清楚讲明白， <strong>如果反响好的话，我会更加动力快速打造出更多基础篇``组件篇``进阶篇``插件篇``如何为自己公司打造组件，也希望大牛能给我一点错误的指点，小白们能和我一起共同学习进步，</strong> 我同时也希望大家能看了之后能给我点一个大大的赞！</p>    <ol>     <li>基础api的讲解，也是根据官方文档讲解，比方说把一些mutation method ，变异方法讲的更白话文一点，让大家更容易的明白</li>     <li>结合工作同时大家会接触的业务场景给出不同的demo,这些demo也是我自己精心在实战中总结出来的</li>     <li>es6在vue中写法的拓展</li>     <li>通过一步一步的学习，此文是浅入深出，给出的demo我们可以复制到自己的电脑上自己跑一遍，跟着自己的想法拓展出别的demo，丰富自己的技术栈</li>    </ol>    <p>Vue是什么，Vue好在那里，多牛B，也就不说了，既然你进来看了，说明他就是牛B的，整个vue生态圈证明了一切，掘金的发表vue的文章也证明了一切。</p>    <p>我所讲的一切都建立在vue-cli 2.2 的脚手架工具里实现</p>    <p><a href="/misc/goto?guid=4959746533212243592" rel="nofollow,noindex">vue-cli安装教程地址 </a></p>    <p>这样东西我就不详细的讲解了我们主要把核心放在基础部分</p>    <p>但是我要对所写的目录结构说一下</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1aa93a2e66f4532555de8b9f6a556aa5.png"></p>    <p>其它我们先不用管，基础部分我们只要对app.vue文件进行改动就可以，然后复制我的demo代码就可以看到所有讲解的demo效果</p>    <p>模板语法</p>    <h2><strong>1.文本</strong></h2>    <p>数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：</p>    <p>Mustache 标签将会被替代为对应数据对象上 world 属性的值 ,而且一直会监听world的值，一但改变会跟着改变</p>    <p>应用场景 ： 可以说处处都用的到</p>    <pre>  <code class="language-javascript"><template>      <div>          <p>hello {{world}}</p>          <p v-text="'hello ' + world"></p>          <p>{{`hello ${world}`}}</p>          <p v-text="`hello ${world}`"></p>          <button @click="world='ziksang'">改变wrold值</button>       </div>  </template>    <script>    export default {       data () {           return {                world : "world"           }       }  }    </script></code></pre>    <p>以上用了四种写法</p>    <p>第一种“Mustache” 语法（双大括号）写法</p>    <p>第二种 用v-text的指今写法</p>    <p>第三种和第四是对es6写法的拓展写法，称模板字符串</p>    <h3><strong>2. v-once</strong></h3>    <p>通过指令我们可以对文本值进行一次性赋值操作，只进行第一次的数据渲染，如果再次改变值，文本值也不会改变</p>    <p>应用场景 ： 一般是用在组件树中传递时，导致组件数据一层一层传递时，变改了不需要改变的场景，用v-once可以避免在组件数中只需用一次性赋值操作</p>    <pre>  <code class="language-javascript"><template>      <div>          <p v-once>hello {{world}}</p>          <button @click="world='ziksang'">改变wrold值</button>       </div>  </template>    <script>    export default {       data () {           return {                world : "world"           }       }  }    </script></code></pre>    <p>我们再次点击button时，我们会发现没有任何改变，值行了所谓的一次性赋值</p>    <h3><strong>3. 纯html</strong></h3>    <p>我们在解析的不是文件而是一个html格式的时候放在v-text中或者{{}}就会被当作一个文本解析，所以我们此时要用v-html指令进行解析，在1.0中支持{{{}}}这种格式，为了防止xss功击，去除了这个功能</p>    <p>常用场景 ： 当我们在跟前后台对接口数据时，后台会返回一个html格式，一般是后台操作界面编译的样式文本，此时我们就要用v-html来进行解析</p>    <pre>  <code class="language-javascript"><template>      <div>          <p v-html='html'></p>       </div>  </template>    <script>    export default {       data () {           return {                html : `<span style='color : red;'>显示红色的字你就解析成功了</span>`           }       }  }  </script></code></pre>    <p>此时在界面我们就能看到显示红色的字你就解析成功了这几个字样，就是被成功解析了</p>    <h3><strong>4. 属性</strong></h3>    <p>在vue中属性这个东西很关健，在组件与组件中数据传递时会很有用，但是对于属性的解析我们不能用{{}}“Mustache” 语法（双大括号）写法，我们同时还是要用指令去解析，那就是v-bind: <em>*</em> ,同时我们可以简写用v-bind语法糖 ：即可</p>    <p>如果我们先不考虑组件传递，我们就是考虑简单的给元素加属性</p>    <p>应用场景 在组件中传递时需要用,其它元素上的绑定属性都需要这个功能</p>    <pre>  <code class="language-javascript"><template>      <div>          <a :href='href'>href</a>          <p :id='id'>id</p>          <img :src="src" alt="图片">          <button :disabled = 'disabled'>按钮</button>       </div>  </template>    <script>    export default {       data () {           return {                id : 2,                href : 'http://www.baidu.com',                src : 'https://cn.vuejs.org/images/logo.png',                disabled : true           }       }  }  </script></code></pre>    <p>我们在属性中支持number string boolean类型，以上显示能在界面中看出都能正常进行和原本属性所预期的，不用：来绑定的属性可以直接属性赋值，如果一定要通过data数据选项中返回的值一定要加 ：</p>    <h3><strong>5.使用javascript表达式</strong></h3>    <p>应用场景 ：</p>    <p>在业务场景中一些方法判断或者简单的过滤，那我们可以用javascript表达式，能让代码更简洁，更清晰，比方说用一个三元表达式。等等</p>    <pre>  <code class="language-javascript"><template>       <div>          <div id="method1">              <p>{{ count < 0 ? '+' : '-'}} {{count + 1}}</p>              <button @click='count ++'>增加</button>              <button @click='count --'>减少</button>          </div>          <div id="method2">              <input type="text" v-model='message'>              <h1>{{ message.split('').reverse().join('') }}</h1>          </div>       </div>  </template>    <script>    export default {       data () {           return {                count : 0,                message : ""           }       }  }    </script></code></pre>    <p>在id:method1 里，我们做了一个对count进行+1，对count进行三元表达式来进行判断做出不同的显示</p>    <p>在id:method2 里，我进行了v-model指令和h1里message进行了双向绑定，随着message的改变h1里的值随着表达式的的改变而改变</p>    <p>注意示项，在官方提出来的这几种是不可行的</p>    <pre>  <code class="language-javascript">这是语句，不是表达式   {{ var a = 1 }}  流控制也不会生效，请使用三元表达式   {{ if (ok) { return message } }}</code></pre>    <h3><strong>6.修饰赋</strong></h3>    <p>修饰符( Modifiers )是以半角句号, 指明的特殊后缀, 用于指出一个指令应该以特殊方式绑定。</p>    <p>应用场景 ：</p>    <p>对于一些特殊的指令操作时需要，比方说对组件加事件，组织元素的默认行为，组织冒泡。等等一系列，官方文档有详细解说每一个修饰赋的具体用途</p>    <p>再次提示主逻辑代码都是写在.App.vue中,所有其它的组件代码都是写在componentes里</p>    <p>首我们先对components文件夹中创建一个myButton组件</p>    <pre>  <code class="language-javascript"><template>      <button>按钮</button>  </template>    <script>  export default {    }  </script></code></pre>    <p>再在app.vue中写入</p>    <pre>  <code class="language-javascript"><template>       <div>           <my-button @click.native="buttonClick"></my-button>       </div>  </template>    <script>  import myButton from './components/myButton.vue'  export default {       components : {           myButton       },       methods : {           buttonClick () {               alert("原生点击")           }       }  }    </script></code></pre>    <p>我们可以尝试一下如果我们去掉.native的话你会发现组件根本出alert(原生点击)的弹框，这是为什么呢，正常的情况在一个单个组件内部自己使用v-on的事件，ok都不会有问题，如果在一个组件上定义一个指令事件，必须要用.native，这里大家一定要注意</p>    <p>####推荐很实用的demo</p>    <p>我们用jquery的时候经常会遇到这种场景，当我们一个layer层弹出来的时候，内部是一个超过整个屏幕长度的滚动，当我们滑动layer的时候会导致里面的滚动也会一起滚动起来，这个是一件很操蛋的事，在网上也有着很多相关解决的办法，vue可以通过修饰符来解决这个问题</p>    <p>index.html文件中加一个视口度适配，更好的来查看效果</p>    <pre>  <code class="language-javascript"><meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″></code></pre>    <p>app.vue文件中</p>    <pre>  <code class="language-javascript"><template>       <div>           <ul>               <li v-for="item in list">                   <h1>{{item}}</h1>               </li>           </ul>           <div @touchmove.prevent class="layer"></div>       </div>  </template>    <script>  import myButton from './components/myButton.vue'  export default {       data () {           return {               list : [1,2,3,4,5,6,7,8,9,10]           }       }  }    </script>    <style>  body,html {width:100%;height:100%}  h1{margin-top:10rem;}  .layer{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99;background:rgba(0,0,0,.5)}  </style></code></pre>    <p>此时我们打开chrome调试工具的时候我们会发当我们滑动layer层的，里面的滚动不会再滚动了，我们再试着把.prevent给去掉，会发现滚动再次出现，这个原理就是event.preventDefault来阻止默认事件事执行的。</p>    <p>实现原理，我们对layer层把它的touchmove滑动事件给干掉了，就不会触发滚动区域的滑动事件，个人认为这个场景每个项目都会用的到</p>    <p>再做一个表单的简单示例</p>    <pre>  <code class="language-javascript"><template>       <div>          <input type="text" v-model.trim="content">          <input type="text" v-model = 'content'>       </div>  </template>    <script>  export default {       data () {           return {               content : ""           }       }  }  </script></code></pre>    <p>这个我们能发现当加入.trim的修饰符的时候给到第二个input的时候都是去掉前后空白符的，这个功能也就是去掉前后空白符，这也是很常用的场景，一些表单当用户输入的时候，有些用户会打出一个前后空白符，有一次我保用户数据给数据库，操作的时候还代码还好好的，突然一个空白字符引发的一场血案，要注意细节点</p>    <h3><strong>6. 过滤器</strong></h3>    <p>Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：</p>    <p>其实本质上过滤器也就是一个或多个表达式，但是有极条件控制的表达式或者长业务逻辑的表达式写在mustache不够清楚，明了</p>    <p>在v-bind中也就是2.10的时候才支持这个功能，这个大家要对这个版本有一定的了解，正确的使用</p>    <p>应用场景 ：</p>    <p>我说说我遇到过的应用场景，再把我应用的场景再加深一点逻辑</p>    <p>1.首先我们从后台拿到10个用户的手机，但是要把前7位掩码，做成*，然判断如果手机尾数是偶数的话，我们就显示已中奖，不是的话显示谢谢参与</p>    <pre>  <code class="language-javascript"><template>       <div>           <p v-for='tel in telephone'>{{tel | newtel}}</p>       </div>  </template>    <script>  export default {       data () {           return {               telephone : [                   10000000000,                   10000000001,                   10000000002,                   10000000003,                   10000000004,                   10000000005,                   10000000006,                   10000000007,                   10000000008,                   10000000009,                   10000000000,               ]           }       },       filters : {           newtel (value) {               if(!value) return ''               value = value.toString().substr(7,4)               value = '*'.repeat(7)+value               let endMember = value.substr(-1,1)               if(endMember % 2){                   value = value+'中奖'               }else{                   value = value+'谢谢参与'               }               return value           }       }  }  </script></code></pre>    <p>代码会析，在filters选项里有个newtel的函数，value则是函数中固定的一个参数，代码过滤前的值，但最后在管道符里我们不用把这个固定的参数写在调用里面，如果没有，则返回"",我们再取后四位，在前7位拼接7个*,这里我用到了es6新特性，repeat这个方法，原本我想用padStart可惜是es7的新性，babel不支持，再截取尾数，如果尾数%2是偶数则再后面加一个中奖，否则谢谢参与，最后把这个value的最终值返回出去</p>    <h3><strong>7.结合过滤器参数与v-bind过滤</strong></h3>    <p>以上过滤器原理也跟大家说了，我们进一步深化一下，如果两都结合使用</p>    <p><strong>应用场景</strong></p>    <p>当后台传给很多链接的地址的时候，每个链接要带上不同的参数，针对于这种场景我给大家实战一下</p>    <pre>  <code class="language-javascript"><template>       <div>           <a v-for='(url,index) in urlList' :href='url.url | getquery(url.name,url.age)'>{{url.url}}</a>       </div>  </template>    <script>  export default {       data () {           return {               urlList : [                   {url : 'http://www.baidu.com',name :'ziksang',age : 20},                   {url : 'http://www.google.com',name :'ziksang2',age : 30}               ]           }       },       filters : {           getquery (value,name,age) {               if(!value) return ""               return `${value}?name=${name}&age=${age}`           }       }  }  </script></code></pre>    <p>在v-bind管道符中的getquery(第一个参,第二个参)</p>    <p>第一个参就是传给fitler里getquery里的第二个参数，就是name</p>    <p>第二个参就是传给fitler里getquery里的第三个参数，就是age</p>    <p>因为第一个参数是默认的</p>    <p>这里我大量用了v-for来进行循环,如果有看不懂的话，等讲到第基础二或者三的时候再回头看看这里的v-for用法你就一目了然了</p>    <h3><strong>8.缩写</strong></h3>    <pre>  <code class="language-javascript"><!-- 完整语法 -->  <a v-bind:href="url"></a>  <!-- 缩写 -->  <a :href="url"></a></code></pre>    <pre>  <code class="language-javascript"><!-- 完整语法 -->  <a v-on:click="doSomething"></a>  <!-- 缩写 -->  <a @click="doSomething"></a></code></pre>    <p>这没有什么可以多讲的，就是一个语法糖，方便大家书写</p>    <p>写到这里，只是简单的讲一下模板语法，但是我个人认为，还展拓了很多其它知识点，刚好如果那些知识点你不会的，可以去查一查做一个预热，在接下来几天中，我们把上出第二篇基础( v-for 列表渲染 )</p>    <p> </p>    <p> </p>    <p>来自：https://zhuanlan.zhihu.com/p/26119383</p>    <p> </p>