Vue之慕课网--01

1. Vue 之 hello world

// 原生js写法
<div id='app'></div>
<script>
    var info = document.getElementById('app')
    info.innerHTML='hello world'
	//隔 1s更改div 中的内容;直接操作dom的写法
    setTimeout(function(){
        info.innerHTML='bye world'
    },1000)
</script>

// vue写法
<div id='app'>{{content}}</div>

<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            content:'hello world'
        }
    })
	//不需要改变dom，只需要对数据进行变更
    setTimeout(function(){
        vm.$data.content='bye world' //vm：vue的实例，$data可理解为data对象
    },1000)
</script>
# 实例.$data = 获取data中的数据；以'$'开头的，指的都是vue的实例属性，或实例方法；
# this.$destroy() 调用destroy: function(){} 生命周期函数;

2. Vue 之 TodoList 案例

通过input框，向正在进行的列表中，增加内容
实现静态页面；
v-for循环，渲染页面；
input框，双向绑定一个值 iptvalue；
点击’提交’按钮，弹出input框中的内容；(测试用)
点击’提交’按钮，把输入框中的内容，增加到 list[ ]数组中；并清空input框;

<div id='app'>
   <input type="text" v-model='iptvalue'>
   <button @click=handlebtn>提交</button>
   <ul>
       <li v-for='item in list'>{{item}}</li>
   </ul>
</div> 

<script src="vue.js"></script>
<script>
   var vm = new Vue({
       el:'#app',
       data:{
           list:[],
           iptvalue:''
       },
       methods:{
           handlebtn:function(){
               // alert(this.iptvalue)
               this.list.push(this.iptvalue)
               this.iptvalue = ''
           }
       }
   })        
</script>

整个案例没有操作dom，只是在操作数据，数据变了，页面自动跟着变化；(MVVM模式)

3. MVP模式：TodoList原生案例

4. 组件化

组件：页面的一个部分；页面中的每一个区域，其实就是一个组件；
组件化，修改 TodoList 案例 (增加 删除)

1.把<li>组件化，父组件把'v-for中的item'传给子组件；子组件模板再渲染出来；
2.子组件模板中，点击'删除'事件，触发this.$emit('delete') 并把index索引值传过去；
  父组件监听这个事件，并执行 deletehandle方法：
  v-on:delete='deletehandle' 默认有一个$event，接收传递过来的参数
     
<div id='app'>
   <input type="text" v-model='iptvalue'>
   <button @click=handlebtn>提交</button>
   <ul>
       <todo-item v-for='(item,index) in list' v-bind:content='item'
        @delete='deletehandle' v-bind:index='index'></todo-item>
   </ul>
</div> 

<script src="vue.js"></script>
<script>
   Vue.component('TodoItem',{
       props:['content','index'],
       template:"
{{content}}
",
       methods:{
           handle:function(){
               this.$emit('delete',this.index) 
           }   //函数中使用 props里的数据，要加this吗？
       }   //同调用vue实例的 this.$destroy()方法一样，加this；
   })
   var vm = new Vue({
       el:'#app',
       data:{
           list:[],
           iptvalue:''
       },
       methods:{
           handlebtn:function(){
               // alert(this.iptvalue)
               this.list.push(this.iptvalue)
               this.iptvalue = ''
           },
           deletehandle:function(index){
               this.list.splice(index,1)
           }
       }
   })        
</script>    

5. Vue实例

var vm = new Vue({
   el:'#app',
   data:{
       content:'hello world'
   }
})
当一个程序进行加载的时候，肯定有一个入口点，都是从vue实例开始执行的，
这个vue实例，叫做根实例；vue中的每一个组件，也是一个实例；
(程序加载时，最先执行的vue实例，叫做根实例；根组件，只调用一次?)
一个vue的项目，是有很多个，小的组件组成的，也是有很多 vue实例组成的；
组件：
<item></item>
Vue.component('item',{       
   template:"
hello world
",
})

6. 条件渲染

<div id='app'>
 <div v-if='show'>
     用户名：<input type="text" key='uname'>
 </div>
 <div v-else>
     邮箱名：<input type="text" key='password'>
 </div>        
</div> 
 //当show为true时，显示用户名；show为false时，显示邮箱名输入框，但输入框内，仍显示之前输入的用户名；
 //vue在重新渲染页面时，会尽量尝试，复用页面存在的dom；加key值，区别不同的input框；
 //key值不建议用index，频繁操作dom元素相对的数据时，无法充分的复用dom节点，浪费性能；可用item.id

7. 修改响应式数据

修改数组内容时，不能通过下标的形式修改，只能通过vue提供的，七个数组变异方法，操作数组，才能实现响应式；
改变引用，也可以实现响应式，数组在 js里是引用类型，可以直接赋值一个新的数组，替换旧数组(了解)

<template v-for='item in list' :key='item.id'>
 <div>{{item.text}}</div>
 <span>{{item.text}}</span>
</template>
//template模板占位符，可以用来包裹一些元素，但并不会渲染到页面上；

1.v-for循环对象时，可以修改某个属性值: vm.对象.属性 = 新值;
但在对象内，新增一项 ‘键:值’ 无法响应式，除非像数组一样，改变引用地址，直接重新赋值；
2.也可以通过vue的set方法，修改响应式数据:
Vue.set( vm.要处理的数组名称, 数组索引, ‘新数组的值’) // vm.数组名字，加vm.
vm.$set( vm.要处理的数组名称, 数组索引, ‘新数组的值’) //vue实例的set()方法
3.修改响应式数据 的几种方法:
数组的变异方法；vue的set()方法；修改引用地址；