iview获取_vue+iview 项目

<div>
<p>vue-cli3创建项目 (创建一个项目 | Vue CLI)<br>1,vue ui (视图创建,会在localhost打开页面,创建项目)<br>2,vue create hello-world</p>
<h2><b>路由跳转</b></h2>
<p>// 字符串<br>this.$router.push('/home/first')</p>
<p>// 对象<br>this.$router.push({ path: '/home/first' })</p>
<p>// 命名的路由<br>this.$router.push({ name: 'home', params: { userId: wise }})</p>
<p><b>1.$emit</b><br>this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件 </p>
<h2>2.v-for</h2>
<div class="blockcode">
  <pre class="blockcode"><code>数组的渲染:
v-for='(item,index) in list' :key="item.id" //index是序号, 加了:key(一定要具有唯一性)
对象渲染:
v-for='(item,key) in Obj' :key="item.id" //item是值,key是键名,加了:key(一定要具有唯一性) </code></pre>
</div>
<h2>3,Vue.set</h2>
<div class="blockcode">
  <pre class="blockcode"><code>1,首先要引入
improt Vue from 'vue'

2,然后在方法中改变页面数据的值
methods:{
  addBtn(){ //点击按钮
Vue.set(this.list, 1, { //this.list 数据数组,1 是数组index=1
   name:'要把之前list 第二个的name改成,现在的值'
})
  }
}</code></pre>
</div>
<p>4,$bus 全局使用父子组件之间的通信</p>
<div class="blockcode">
  <pre class="blockcode"><code>main.js
创建一个全局的$bus对象
const EventBus = new Vue()

Object.defineProperties(Vue.prototype, {
  $bus: {
get: function () {
   return EventBus;
}
  }
})
子组件:
在子组件中可以互相通信
methods:{
   nav(item){
      this.$bus.$emit('navBtnSublis',item);
      console.log('触发兄弟组件事件',item.id);
   }
},
created(){
   var _self = this;
   this.$bus.$on('navBtnSublis', function (data) {
      console.log('接收到兄弟组件传参', data.id);
   })
},
父组件接受:
mounted () {
      var _self = this;
      this.$bus.$on('navBtnSublis', function (data) {
      console.log('父接受子', data.id);
      })
   }
</code></pre>
</div>
<p><b>5.props 可以是数组或对象，用于接收来自父组件的数据</b></p>
<p><b>6.computed 计算属性</b><b>类型</b>：<code>{ [key: string]: Function | { get: Function, set: Function } }</code> </p>
<p><b>7.watch 监听</b></p>
<p></p>
<div style="text-align:center;">
  <img alt="04325ebd976248d56f78c9b2125f6624.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-57f65303f2a48c6b12ad0ae9481c75bc.png">
</div>
<p></p>
<div style="text-align:center;">
  <img alt="ef4e3e90da4d7ac9657debd1e43e825e.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-ea6a96915fca26d85fd8bbb52aca7f41.png">
</div>
<p><b>8,组件使用</b></p>
<div class="blockcode">
  <pre class="blockcode"><code>1,<com-a></com-a>
2,<p :is = 'com-a'></p>
3,如下:</code></pre>
</div>
<p></p>
<div style="text-align:center;">
  <img alt="d9ec0c478c1b4c6efa22db5073ebe1a8.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-4471cb898184ac9b35446fc052b8e011.png">
</div>
<p><b>9,父组件给子组件插入模板,需要<slot></slot>插槽</b></p>
<p>9-1 父级: 可以插入<img> span 等等</p>
<p></p>
<div style="text-align:center;">
  <img alt="306544e3b8ab99fe3931392880a3fdeb.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-ca1000899507a9df1fa16bf4aa351416.png">
</div>
<p>9-1 子级:</p>
<p></p>
<div style="text-align:center;">
  <img alt="582c8f05effa49d9d9b1ca805ca291d1.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-5662bc01b20079d1940936325f5d8b6b.png">
</div>
<p>9-2 父级: (父级向子级给指定的插槽插入模板)</p>
<p></p>
<div style="text-align:center;">
  <img alt="3024f494271f8861e0e2270ad4b0eb97.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-49bf961184ed2096055e32edb1f75262.png">
</div>
<p>9-2 子级:</p>
<p></p>
<div style="text-align:center;">
  <img alt="5a8bc5860e14e4032845188ecf123fc8.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-95fa0f9b804932860facaf0cecf39add.png">
</div>
<p></p>
<div style="text-align:center;">
  <img alt="99e7c8e1cdc37297497a317d2d3ecdb9.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-12cf123b90c37ace0cdfc834a1eee353.png">
</div>
<p>主意:<br>用此项目的时候 <br>npm install (会报错)<br>修改:</p>
<p></p>
<div style="text-align:center;">
  <img alt="67232ae13ebbae015351882d5552aa8d.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-2c1fc45dc444f23745e7478054950e89.png">
</div>
<p><b>fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});</b></p>
<p>替换为</p>
<p><b>fs.write(fd, buf, 0, 'utf-8', function(err, written, buffer) {});</b></p>
<p><b>然后:npm run init </b><b>最后:npm run dev</b></p>
<h2>Vue中的package.json里面dependencies和devDependencies区别</h2>
<blockquote>
  <i>使用 npm i 【包名】 --save-dev 安装的包，会被写入到 devDependencies 对象里面去；</i>
  <i>而使用 npm i 【包名】 --save 安装的包，则被写入到 dependencies 对象里面去。</i>
</blockquote>
<p>dependencies：<br>应用能