Vue学习笔记:初入门

Vue学习笔记:记录于此，以观后效

(1) 
使用export抛出的变量需要用{}进行import： 
//a.js 
export function getList(){}; 
//b.js 
import { getList } from ‘./a.js’;


(2) 
使用export default抛出的变量，只需要自己起一个名字就行： 
//a.js 
var obj = { name: ‘zhazhahui’ }; 
export default obj; 
//b.js 
import aaa from ‘./a.js’; 
console.log(aaa.name);// ‘zhazhahui’;


(3) 
切记，一个js文件中，只能有一个export default； 
但是，一个js文件中，可以有多个export。


******************************************************************************************
index.html <div id="app000"></div>中的id必须与
main.js new Vue({el:'#app000'})中的el名称一致，推测：vue会重新渲染前端，id会被vue重新设置，
<div id="app000"></div>中间的元素都没有显示出来，但是刷新的时候会一闪而过
******************************************************************************************
App.vue <div id="app111">中的id必须与App.vue中的<style> #app111名称保持一致。div中使用的id就是style中的选择器
******************************************************************************************
因为 JavaScript 的限制，Vue.js 不能检测到下面数组变化：
直接用索引设置元素，如 vm.items[0] = {}；
修改数据的长度，如 vm.items.length = 0。
为了解决问题 (1)，Vue.js 扩展了观察数组，为它添加了一个 $set() 方法：
// 与 `example1.items[0] = ...` 相同，但是能触发视图更新
example1.items.$set(0, { childMsg: 'Changed!'})
至于问题 (2)，只需用一个空数组替换 items。
除了 $set()， Vue.js 也为观察数组添加了 $remove() 方法，用于从目标数组中查找并删除元素，在内部它调用 splice() 。因此，不必这样：
var index = this.items.indexOf(item)
if (index !== -1) {
  this.items.splice(index, 1)
}
只用这样：
this.items.$remove(item)
******************************************************************************************
label标签的for属性，有了for属性，点击label的文字，会触发for对应的id的checkbox的选中/取消效果，没有for对应的id就只能点击checkbox，点文字没反应
******************************************************************************************
页面跳转：
主页面跳转：
标签a  <a href="http://www.baidu.com" style="color:#00ffff">百度</a>
标签router-link <router-link to="/MySecondVue"> test </router-link>
router-link可以主页面跳转，也可以子页面跳转，跳转后url会变
router/index.js或者和main.js同级目录的router.js中定义路由（router名字可以改）
export default new Router({
  routes: [
    {
      path: '/',
      name: 'MyFristVue',
      component: MyFristVue,
      redirect:'/123' ,


      children: [{
      path: '/123', 
      name: 'MySecondVue', 
      component: MySecondVue
      }, 


      {
      path: '/1232', 
      name: 'MySecondVue2', 
      component: MySecondVue2    
      }


      ]
    }, 


    {
   path: '/MySecondVue', 
   name: 'MySecondVue', 
   component: MySecondVue
    }


  ]
})
主页面的跳转需要同级路由元素MyFirstVue-->MySecondVue 
to是route中的path


子页面跳转
MysecondVue-->MySecondVue2
<div class="right">
<router-link to="/123"> test </router-link>
<br>
<router-link to="/1232"> t000est </router-link>
</div>
<router-view>


</router-view>
router-view中什么都不用写


上面Router的写法会报警告，说是MySecondVue有两个路由，只做例子，不做项目
******************************************************************************************
父页面向子页面传递数据
<MyTag v-if="tagchange" parentmessage="i am oddd first vue"> </MyTag>
<MyTag2 v-else="tagchange"> </MyTag2>


MyTag中加入
export default {
name:"MyTag", 
props:['parentmessage'],
data () {
return {
tagMsg:""
}
}
}


动态传递
<input v-model="firstMsg" placeholder="for tag3">
<MyTag3 v-bind:parentmessageone="firstMsg"> </MyTag3>
data中加入firstMsg: '',
input中修改的数值会因为v-bind传入到子页面
<p>MyTag33 {{parentmessageone}}</p>
子页面的parentmessageone会接收实时修改的firstMsg




******************************************************************************************
子页面向父页面添加数据
子页面中<button id="button2" @click="sendToParent"> 给父页面发消息 </button>用来触发sendToParent函数
methods:{
sendToParent:function(){
console.log('sendToParent happen');
this.$emit('reciveMsg', this.$data.tagMsg + 'reciveMsg');
}
}
sendToParent函数中调用this.$emit。父页面中要@reciveMsg，
父页面中<MyTag2 v-else="tagchange" @reciveMsg='pppreciveMsg'> </MyTag2>
methods: {
pppreciveMsg:function(data){
 console.log('get msg : ppp : ' + data);
}
}
@reciveMsg用来跟子页面绑定，子页面调用this.$emit后会触发pppreciveMsg函数
******************************************************************************************