Vue从Hello World到打包(后端适读)

testing69 3年前
   <h2>Vue从Hello World到上线</h2>    <h2>Vue 简介</h2>    <p>Vue是个MVVM框架。</p>    <p>特点:简单易学、体积小、性能高。并且它的源码耦合性非常低,了解它的过程也就是思想进步的过程。</p>    <p>当然,只学这一个框架,无法完成前端的全部工作,除了Vue之外,还需要了解axios、Webpack,才能完成整个开发过程。</p>    <p>好了,我们开始!</p>    <h2>Vue的Hello World</h2>    <p>写Hello World已经成了传统,我们也不例外,尽管Vue的入门文档写的非常好,但是在这里还是按照我的思路来走吧!</p>    <p>首先,我们先写一个html页面:</p>    <pre>  <code class="language-javascript"><body>     <div>Hello World</div>   </body></code></pre>    <p>好了,现在我们已经写出了一个静态的Hello World,现在我们要用Vue将它改造成动态的。Vue的引入可以很简单,像极了jQuery,一个 <script> 标签引入即可。</p>    <pre>  <code class="language-javascript"><body>     <div>Hello World</div>      <script src="vue.js"></div>  </body></code></pre>    <p>然后我们再建一个 <script> 书写vue代码。</p>    <pre>  <code class="language-javascript"><body>     <div>Hello World</div>      <script src="vue.js"></div>     <script>     new Vue({          el: 'body',     // 这里遵循的是css的选择器规则,这句的意思是,body标签内都是Vue的控制范围          data: {     // 这里是数据,需要Vue绑定的数据都放在这里              myData: 'Hello World'             }     })     </script>  </body></code></pre>    <p>好了,现在我们只差一步了,Vue里面已经有了数据,只欠绑定,将 <div> 内的内容改成这样既可:{{ myData }},那么最终的写法是这样:</p>    <pre>  <code class="language-javascript"><body>     <div>{{ myData }}</div>      <script src="vue.js"></div>     <script>     new Vue({          el: 'body',              data: {                   myData: 'Hello World'   // 上面的el和data这两个单词都是不允许改的,但是这句里的key可以随意命名          }     })     </script>  </body></code></pre>    <p>现在Hello World已经写出来了,那就需要敲打一下了。 el: 'body' 这个地方十分不建议写成这样,直接绑定 body 会有一些方法无法使用,建议写成这样:</p>    <pre>  <code class="language-javascript"><body>      <section id="app">          <div>{{ myData }}</div>       </section>      <script src="vue.js"></div>      <script>      new Vue({          el: '#app',              data: {                   myData: 'Hello World'   // 上面的el和data这两个单词都是不允许改的,但是这句里的key可以随意命名          }      })     </script>  </body></code></pre>    <p>在body内部添加一层并赋一个id是比较好的做法。放心,这或许是你整个Vue项目唯一需要写的ID属性,它不需要像jQuery一样命名一大堆ID。</p>    <h2>添加事件</h2>    <p>上面的Hello World其实就是一个数据绑定,那么我们深入一点,来了解事件绑定:</p>    <p>现在,有一个需求,需要在 <div>{{ myData }}</div> 这个块里添加一个点击事件,给你十秒钟想一想jQuery是怎么做的,是不是挺复杂的?而Vue有很简单的事件绑定写法:</p>    <pre>  <code class="language-javascript"><div @click="myClick">{{ myData }}</div>  // 是不是很像onClick事件?  // 其实是不一样的,在最终生成的代码里,你不会看到@click,它最终会被转换成DOM2级事件。</code></pre>    <p>现在,我们点击这个 <div> 块的时候,就会触发myClick方法,咦,等等,myClick方法还没定义呢!</p>    <p>那我们回到js代码里,添加methods属性:</p>    <pre>  <code class="language-javascript">new Vue({      el: '#app',          data: {               myData: 'Hello World'      },      methods: {      // 这个methods也是不可以改的哦,记得加s          myClick: function() {              alert("你点" + this.myData + "干啥?");              // 你可以尽情使用data里的数据,但是要加上this指向          }      }  })</code></pre>    <p>好了,可以运行了,如果myClick方法需要加参数的话,也很简单: <div @click="myClick(myData)">{{ myData }}</div> ,当然,下面的定义部分也需要配上形参:</p>    <pre>  <code class="language-javascript">myClick: function(data) {      alert("你点" + data + "干啥?");  }</code></pre>    <p>相信你看出来了,data里面是放数据的,methods里面是放方法的。</p>    <h2>添加属性</h2>    <p>理解了添加时间,那理解添加属性就更简单了。</p>    <p>例如,有个 <img> 标签的图片路径是动态的,那么我们就需要用上属性绑定了:</p>    <pre>  <code class="language-javascript"><img :src="srcUrl" />  ...  new Vue({      el: '#app',          data: {               srcUrl: '../images/logo.png'      }  })</code></pre>    <p>警告: <img :src="srcUrl" /> 如果这个标签的src属性值是动态的,那就不要添加原生的src属性,通过属性绑定的方式引入路径是最佳实践,其他属性绑定也是同理。</p>    <h2>更强的数据绑定</h2>    <p>如果我们有这样一段数据:</p>    <pre>  <code class="language-javascript">arr = [1, 2, 3, 4, 5, 6];</code></pre>    <p>需要用 <ul> 和 <li> 标签渲染,给你十秒钟想想jQuery是怎么做的?不管怎么做,做出来都是悲剧!</p>    <p>我们看看Vue是怎么做的?</p>    <pre>  <code class="language-javascript">data: {      list: arr  }  ...  <ul>      <li v-for="item in list">{{ item }}</li>  </ul></code></pre>    <p>如此一来,数据就可以漂亮地渲染到页面上了。</p>    <p>我们再来个复杂点的数据:</p>    <pre>  <code class="language-javascript">json = [      {          "AirPortCode": "HGH",           "Temperature": "10℃",           "Visib": "很好",           "WeatherType": "晴",           "Wind": "东风 - 3级",           "city": "杭州"      },       {          "AirPortCode": "CAN",           "Temperature": "17℃",           "Visib": "7000米",           "WeatherType": "多云",           "Wind": "北偏东北风 - 2级",           "city": "广州"      },       {          "AirPortCode": "PEK",           "Temperature": "12℃",           "Visib": "很好",           "WeatherType": "晴",           "Wind": "南偏西南风 - 2级",           "city": "北京首都"      }  ]</code></pre>    <p>给你十秒钟想想……</p>    <p>算了,还是直接上vue吧</p>    <pre>  <code class="language-javascript">data: {      list: json  }  ...  <ul>      <li v-for="item in json">{{ item.city }} {{ item.Temperature }}</li>  </ul></code></pre>    <p>在这里只显示了城市和温度两样东西。你愿意的话,可以显示更多。尽管数据好像复杂了很多,但是Vue应付起来并没有多吃力。</p>    <p>好了,我想我们的页面已经足够动态了,但是还不够只能,怎么说呢?例如上面的数据里有个 Wind 的字段,将这个字段渲染到页面上的时候,我并不希望全部渲染,我只想渲染风力级别,那我需要将前面的风向给去掉,这时候就需要加过滤器。</p>    <pre>  <code class="language-javascript"><li v-for="item in json">{{ item.Wind | cutWind }}</div></code></pre>    <p>Vue提供了内置的过滤器,但切割天气显然不是它内置的过滤器,因此我们现在需要自己定义一个:</p>    <pre>  <code class="language-javascript">Vue.filter( 'cutWind' , function(value) {      return value.split("-")[1];  });</code></pre>    <p>本来还应该加一个去空格的处理,但现在为了演示就暂且无视空格吧……</p>    <h2>Ajax</h2>    <p>现在数据都可以动态渲染了,我们需要考虑的就是,应该怎么从服务端获取数据,ajax库有很多,Vue原本也自己实现了一个,但后来弃用了,原因是不想重复造轮子。现在官方推荐的Ajax库叫axios,它确实也是一个小巧而轻量的库,体积大约是11k,同样可以通过 <script> 标签引入。</p>    <p>使用起来也简单,一般的ajax的POST请求:</p>    <pre>  <code class="language-javascript">var _this = this;  axios.post('../url', string)  .then(function(res) {      _this.init(res);  });</code></pre>    <p>看!axios将自己暴露了,它是个类库!</p>    <p>然而,初始化的数据需要一载入页面就发请求去获取,我们可以将它写入钩子函数:</p>    <p>钩子函数,也就是从创建Vue实例到销毁的过程中,每一个阶段提供出来的一个扩展接口,我们可以通过这些接口在特定的生命周期时刻执行相应的动作。</p>    <pre>  <code class="language-javascript">new Vue({      el: '#app',          data: {               myData: ''      },      mounted: function() {          var _this = this;          this.$nextTick(function() {              axios.post('./url', arg).then(function(res) {                  _this.init(res.data);              });          })      },      methods: {                myClick: function() {          }      }  })</code></pre>    <p>init() 就是我们的初始化方法了。</p>    <h2>打包</h2>    <p>上面的知识点已经足够支撑我们完成一个日常项目,但这些语法层面的知识点只是表面,使用MVVM框架开发,关键是习惯专注于操作数据的思想,才能将代码量从根本上减小。</p>    <p>现在,我们完成一个项目后,需要打包,因为在开发环境下,运行所依赖的包达到好几百个,为了将文件体积缩减到正常范围,必须按需打包。打包工具我们选用的是webpack,为什么选它呢?因为几乎没别的选!</p>    <p>webpack如何配置,这个交给前端工程师就好了!</p>    <p>一个Vue的项目,目录树大致是这样:</p>    <p><img src="https://simg.open-open.com/show/3adc6cf03d9f1cb8bfac5007e1358cee.png"></p>    <p>/src 目录是源码文件夹,里面的都是源码,开发环境都只打开这个文件。</p>    <p>/dist 目录是发布文件夹,取自“distribution(发布)”这个单词,里面的代码都是正式代码,所有资源都经过压缩,因此不是给人看的。</p>    <p>对 /src 里的文件做了相应的修改后,可以查看 package.json 这个文件,找到</p>    <pre>  <code class="language-javascript">"scripts": {      "build": "webpack --progress -p --watch"  },</code></pre>    <p>不同的项目可能略有差别,但webpack命令就是我们需要的,这条命令的key是 build ,因此我们在项目的命令行运行 npm run build ,即可完成打包,如果没有报错信息,说明一切顺利,只需要将 dist 目录里的东西部署到线上即可。</p>    <p> </p>    <p>来自:https://segmentfault.com/a/1190000008722404</p>    <p> </p>