找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › 技术交流区 › 前端技术交流 › 查看内容
发新帖

断天涯大虾

社区贡献组

269

主题

272

帖子

1655

积分

社区贡献组

积分
1655

微信认证勋章

最新发帖

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

断天涯大虾
社区贡献组   /  发表于：2017-4-5 10:15  /   查看：13098  /  回复：0
本帖最后由 断天涯大虾 于 2017-4-5 10:23 编辑

列一个清单吧，其实入门就是基础，如何入门我下面总结一下我展示结的流程，用心去给大家写一个就像我标题写的史上最详细VUE2.0最详细全套讲解（基础篇），听了小编的建议分多次写，把每一细讲透彻讲清楚讲明白， 如果反响好的话，我会更加动力快速打造出更多基础篇``组件篇``进阶篇``插件篇``如何为自己公司打造组件，也希望大牛能给我一点错误的指点，小白们能和我一起共同学习进步， 我同时也希望大家能看了之后能给我点一个大大的赞！
  • 基础api的讲解，也是根据官方文档讲解，比方说把一些mutation method ，变异方法讲的更白话文一点，让大家更容易的明白
  • 结合工作同时大家会接触的业务场景给出不同的demo,这些demo也是我自己精心在实战中总结出来的
  • es6在vue中写法的拓展
  • 通过一步一步的学习，此文是浅入深出，给出的demo我们可以复制到自己的电脑上自己跑一遍，跟着自己的想法拓展出别的demo，丰富自己的技术栈


Vue是什么，Vue好在那里，多牛B，也就不说了，既然你进来看了，说明他就是牛B的，整个vue生态圈证明了一切，掘金的发表vue的文章也证明了一切。

我所讲的一切都建立在vue-cli 2.2 的脚手架工具里实现

这样东西我就不详细的讲解了我们主要把核心放在基础部分
但是我要对所写的目录结构说一下
其它我们先不用管，基础部分我们只要对app.vue文件进行改动就可以，然后复制我的demo代码就可以看到所有讲解的demo效果
模板语法


1.文本
数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：
Mustache 标签将会被替代为对应数据对象上 world 属性的值 ,而且一直会监听world的值，一但改变会跟着改变
应用场景 ： 可以说处处都用的到
  1. <template>
  2.     <div>
  3.         <p>hello {{world}}</p>
  4.         <p v-text="'hello ' + world"></p>
  5.         <p>{{`hello ${world}`}}</p>
  6.         <p v-text="`hello ${world}`"></p>
  7.         <button @click="world='ziksang'">改变wrold值</button>
  8.      </div>
  9. </template>

  11. <script>

  13. export default {
  14.      data () {
  15.          return {
  16.               world : "world"
  17.          }
  18.      }
  19. }

  21. </script>
复制代码
以上用了四种写法
第一种“Mustache” 语法（双大括号）写法
第二种 用v-text的指今写法
第三种和第四是对es6写法的拓展写法，称模板字符串


2. v-once
通过指令我们可以对文本值进行一次性赋值操作，只进行第一次的数据渲染，如果再次改变值，文本值也不会改变
应用场景 ： 一般是用在组件树中传递时，导致组件数据一层一层传递时，变改了不需要改变的场景，用v-once可以避免在组件数中只需用一次性赋值操作
  1. <template>
  2.     <div>
  3.         <p v-once>hello {{world}}</p>
  4.         <button @click="world='ziksang'">改变wrold值</button>
  5.      </div>
  6. </template>

  8. <script>

  10. export default {
  11.      data () {
  12.          return {
  13.               world : "world"
  14.          }
  15.      }
  16. }

  18. </script>
复制代码
我们再次点击button时，我们会发现没有任何改变，值行了所谓的一次性赋值


3. 纯html
我们在解析的不是文件而是一个html格式的时候放在v-text中或者{{}}就会被当作一个文本解析，所以我们此时要用v-html指令进行解析，在1.0中支持{{{}}}这种格式，为了防止xss功击，去除了这个功能
常用场景 ： 当我们在跟前后台对接口数据时，后台会返回一个html格式，一般是后台操作界面编译的样式文本，此时我们就要用v-html来进行解析
  1. <template>
  2.     <div>
  3.         <p v-html='html'></p>
  4.      </div>
  5. </template>

  7. <script>

  9. export default {
  10.      data () {
  11.          return {
  12.               html : `<span style='color : red;'>显示红色的字你就解析成功了</span>`
  13.          }
  14.      }
  15. }
  16. </script>
复制代码
此时在界面我们就能看到显示红色的字你就解析成功了这几个字样，就是被成功解析了


4. 属性
在vue中属性这个东西很关健，在组件与组件中数据传递时会很有用，但是对于属性的解析我们不能用{{}}“Mustache” 语法（双大括号）写法，我们同时还是要用指令去解析，那就是v-bind: * ,同时我们可以简写用v-bind语法糖 ：即可
如果我们先不考虑组件传递，我们就是考虑简单的给元素加属性
应用场景 在组件中传递时需要用,其它元素上的绑定属性都需要这个功能
  1. <template>
  2.     <div>
  3.         <a :href='href'>href</a>
  4.         <p :id='id'>id</p>
  5.         <img :src="src" alt="图片">
  6.         <button :disabled = 'disabled'>按钮</button>
  7.      </div>
  8. </template>

  10. <script>

  12. export default {
  13.      data () {
  14.          return {
  15.               id : 2,
  16.               href : 'http://www.baidu.com',
  17.               src : 'https://cn.vuejs.org/images/logo.png',
  18.               disabled : true
  19.          }
  20.      }
  21. }
  22. </script>
复制代码
我们在属性中支持number string boolean类型，以上显示能在界面中看出都能正常进行和原本属性所预期的，不用：来绑定的属性可以直接属性赋值，如果一定要通过data数据选项中返回的值一定要加 ：


5.使用javascript表达式
应用场景 ：
在业务场景中一些方法判断或者简单的过滤，那我们可以用javascript表达式，能让代码更简洁，更清晰，比方说用一个三元表达式。等等
  1. <template>
  2.      <div>
  3.         <div id="method1">
  4.             <p>{{ count < 0 ? '+' : '-'}} {{count + 1}}</p>
  5.             <button @click='count ++'>增加</button>
  6.             <button @click='count --'>减少</button>
  7.         </div>
  8.         <div id="method2">
  9.             <input type="text" v-model='message'>
  10.             <h1>{{ message.split('').reverse().join('') }}</h1>
  11.         </div>
  12.      </div>
  13. </template>

  15. <script>

  17. export default {
  18.      data () {
  19.          return {
  20.               count : 0,
  21.               message : ""
  22.          }
  23.      }
  24. }

  26. </script>
复制代码
在id:method1 里，我们做了一个对count进行+1，对count进行三元表达式来进行判断做出不同的显示
在id:method2 里，我进行了v-model指令和h1里message进行了双向绑定，随着message的改变h1里的值随着表达式的的改变而改变
注意示项，在官方提出来的这几种是不可行的
  1. 这是语句，不是表达式
  2. {{ var a = 1 }}
  3. 流控制也不会生效，请使用三元表达式
  4. {{ if (ok) { return message } }}
复制代码


6.修饰赋
修饰符( Modifiers )是以半角句号, 指明的特殊后缀, 用于指出一个指令应该以特殊方式绑定。
应用场景 ：
对于一些特殊的指令操作时需要，比方说对组件加事件，组织元素的默认行为，组织冒泡。等等一系列，官方文档有详细解说每一个修饰赋的具体用途
再次提示主逻辑代码都是写在.App.vue中,所有其它的组件代码都是写在componentes里
首我们先对components文件夹中创建一个myButton组件
  1. <template>
  2.     <button>按钮</button>
  3. </template>

  5. <script>
  6. export default {

  8. }
  9. </script>
复制代码
再在app.vue中写入
  1. <template>
  2.      <div>
  3.          <my-button @click.native="buttonClick"></my-button>
  4.      </div>
  5. </template>

  7. <script>
  8. import myButton from './components/myButton.vue'
  9. export default {
  10.      components : {
  11.          myButton
  12.      },
  13.      methods : {
  14.          buttonClick () {
  15.              alert("原生点击")
  16.          }
  17.      }
  18. }

  20. </script>
复制代码
我们可以尝试一下如果我们去掉.native的话你会发现组件根本出alert(原生点击)的弹框，这是为什么呢，正常的情况在一个单个组件内部自己使用v-on的事件，ok都不会有问题，如果在一个组件上定义一个指令事件，必须要用.native，这里大家一定要注意

####推荐很实用的demo
我们用jquery的时候经常会遇到这种场景，当我们一个layer层弹出来的时候，内部是一个超过整个屏幕长度的滚动，当我们滑动layer的时候会导致里面的滚动也会一起滚动起来，这个是一件很操蛋的事，在网上也有着很多相关解决的办法，vue可以通过修饰符来解决这个问题
index.html文件中加一个视口度适配，更好的来查看效果
  1. <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
复制代码
app.vue文件中
  1. <template>
  2.      <div>
  3.          <ul>
  4.              <li v-for="item in list">
  5.                  <h1>{{item}}</h1>
  6.              </li>
  7.          </ul>
  8.          <div @touchmove.prevent class="layer"></div>
  9.      </div>
  10. </template>

  12. <script>
  13. import myButton from './components/myButton.vue'
  14. export default {
  15.      data () {
  16.          return {
  17.              list : [1,2,3,4,5,6,7,8,9,10]
  18.          }
  19.      }
  20. }

  22. </script>

  24. <style>
  25. body,html {width:100%;height:100%}
  26. h1{margin-top:10rem;}
  27. .layer{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99;background:rgba(0,0,0,.5)}
  28. </style>
复制代码
此时我们打开chrome调试工具的时候我们会发当我们滑动layer层的，里面的滚动不会再滚动了，我们再试着把.prevent给去掉，会发现滚动再次出现，这个原理就是event.preventDefault来阻止默认事件事执行的。

实现原理，我们对layer层把它的touchmove滑动事件给干掉了，就不会触发滚动区域的滑动事件，个人认为这个场景每个项目都会用的到
再做一个表单的简单示例
  1. <template>
  2.      <div>
  3.         <input type="text" v-model.trim="content">
  4.         <input type="text" v-model = 'content'>
  5.      </div>
  6. </template>

  8. <script>
  9. export default {
  10.      data () {
  11.          return {
  12.              content : ""
  13.          }
  14.      }
  15. }
  16. </script>
复制代码
这个我们能发现当加入.trim的修饰符的时候给到第二个input的时候都是去掉前后空白符的，这个功能也就是去掉前后空白符，这也是很常用的场景，一些表单当用户输入的时候，有些用户会打出一个前后空白符，有一次我保用户数据给数据库，操作的时候还代码还好好的，突然一个空白字符引发的一场血案，要注意细节点


6. 过滤器
Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：

其实本质上过滤器也就是一个或多个表达式，但是有极条件控制的表达式或者长业务逻辑的表达式写在mustache不够清楚，明了
在v-bind中也就是2.10的时候才支持这个功能，这个大家要对这个版本有一定的了解，正确的使用

应用场景 ：
我说说我遇到过的应用场景，再把我应用的场景再加深一点逻辑
1.首先我们从后台拿到10个用户的手机，但是要把前7位掩码，做成*，然判断如果手机尾数是偶数的话，我们就显示已中奖，不是的话显示谢谢参与
  1. <template>
  2.      <div>
  3.          <p v-for='tel in telephone'>{{tel | newtel}}</p>
  4.      </div>
  5. </template>

  7. <script>
  8. export default {
  9.      data () {
  10.          return {
  11.              telephone : [
  12.                  10000000000,
  13.                  10000000001,
  14.                  10000000002,
  15.                  10000000003,
  16.                  10000000004,
  17.                  10000000005,
  18.                  10000000006,
  19.                  10000000007,
  20.                  10000000008,
  21.                  10000000009,
  22.                  10000000000,
  23.              ]
  24.          }
  25.      },
  26.      filters : {
  27.          newtel (value) {
  28.              if(!value) return ''
  29.              value = value.toString().substr(7,4)
  30.              value = '*'.repeat(7)+value
  31.              let endMember = value.substr(-1,1)
  32.              if(endMember % 2){
  33.                  value = value+'中奖'
  34.              }else{
  35.                  value = value+'谢谢参与'
  36.              }
  37.              return value
  38.          }
  39.      }
  40. }
  41. </script>
复制代码
代码会析，在filters选项里有个newtel的函数，value则是函数中固定的一个参数，代码过滤前的值，但最后在管道符里我们不用把这个固定的参数写在调用里面，如果没有，则返回"",我们再取后四位，在前7位拼接7个*,这里我用到了es6新特性，repeat这个方法，原本我想用padStart可惜是es7的新性，babel不支持，再截取尾数，如果尾数%2是偶数则再后面加一个中奖，否则谢谢参与，最后把这个value的最终值返回出去


7.结合过滤器参数与v-bind过滤
以上过滤器原理也跟大家说了，我们进一步深化一下，如果两都结合使用
应用场景
当后台传给很多链接的地址的时候，每个链接要带上不同的参数，针对于这种场景我给大家实战一下
  1. <template>
  2.      <div>
  3.          <a v-for='(url,index) in urlList' :href='url.url | getquery(url.name,url.age)'>{{url.url}}</a>
  4.      </div>
  5. </template>

  7. <script>
  8. export default {
  9.      data () {
  10.          return {
  11.              urlList : [
  12.                  {url : 'http://www.baidu.com',name :'ziksang',age : 20},
  13.                  {url : 'http://www.google.com',name :'ziksang2',age : 30}
  14.              ]
  15.          }
  16.      },
  17.      filters : {
  18.          getquery (value,name,age) {
  19.              if(!value) return ""
  20.              return `${value}?name=${name}&age=${age}`
  21.          }
  22.      }
  23. }
  24. </script>
复制代码
在v-bind管道符中的getquery(第一个参,第二个参)
第一个参就是传给fitler里getquery里的第二个参数，就是name
第二个参就是传给fitler里getquery里的第三个参数，就是age
因为第一个参数是默认的
这里我大量用了v-for来进行循环,如果有看不懂的话，等讲到第基础二或者三的时候再回头看看这里的v-for用法你就一目了然了


8.缩写
  1. <!-- 完整语法 -->
  2. <a v-bind:href="url"></a>
  3. <!-- 缩写 -->
  4. <a :href="url"></a>
  5. <!-- 完整语法 -->
  6. <a v-on:click="doSomething"></a>
  7. <!-- 缩写 -->
  8. <a @click="doSomething"></a>
复制代码
这没有什么可以多讲的，就是一个语法糖，方便大家书写
写到这里，只是简单的讲一下模板语法，但是我个人认为，还展拓了很多其它知识点，刚好如果那些知识点你不会的，可以去查一查做一个预热，在接下来几天中，我们把上出第二篇基础( v-for 列表渲染 )

   
关于葡萄城：全球最大的控件提供商，世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商，为超过75%的全球财富500强企业提供服务。

1 个回复

倒序浏览
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部