vue初接触

1.安装配置

可以下载文件，也可以使用cdn直接引入。

使用了菜鸟教程的推荐网址：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

也可以使用官网推荐的网址：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.使用vue（举例），挂载点、模板、方法：

<div id="app">{{ message }}</div>
<script>
var app = new Vue({
  el: '#app',
  template: '<p>hello</p>',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

创建一个 vue 实例，其中称 el 下的 dom 节点为我们的挂载点，也就是页面内对应的元素（element）。称template为模板，挂载点下的内容称为模板内容，模板内容可以在页面上写，也可以在template下写。只会在对应的挂载点生效。data则保存将要显示的信息，用 {{}} 在页面显示key对应的value值，{{}}这个语法称为插值表达式。template会覆盖原有的内容。

除了{{}}还有其他表达方式。例：

<div v-text="message"></div>

<div v-html="message"></div>

v-text会转义字符串内容，例message:"<h1>a</h1>"，则显示的内容为<h1>a</h1>，v-html不会转义，则显示 a 。

绑定点击事件

<div id="app">
    <div v-on:click="handleClick">{{ message }}</div>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    methods:{
      handleClick: function(){alert(123)}
    }
  })
</script>

 v-on:click绑定的方法，在methods里设计实现。

v-on:click可以简写成 @click

 methods:{
    handleClick: function(){
        this.message="world
    }
 }

vue可以直接修改data数据，页面也会自动改变。

3.属性绑定，双向数据绑定

<div id="app">
    <div v-bind:title="'sdx '+title">{{ message }}</div>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      title:"this is title"
    }
  })
</script>

鼠标移动到Hello Vue！文字时，会显示sdx this is title。v-bind：title可以缩写为：title。

单向绑定：数据控制页面的显示内容，双向绑定可以改变页面内容，也可以显示页面内容。随输入框内容的变化，div内容一起变化。使用v-model双向数据绑定。

<div id="app">
    <input v-model="message"/>
    <div>{{ message }}</div>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
    }
  })
</script>

4.计算属性和侦听器

<div id="root">
    姓：<input v-model="firstname"/>
    名：<input v-model="lastname"/>
    <div>{{fullname}}</div>
    <div>{{count}}</div>

</div>
<script>
    new Vue({
    el: '#root',
    data: {
      firstname: '',
      lastname: '',
　　　 count:0
    },
    computed:{
      fullname: function(){
        return this.firstname+" "+this.lastname
        }
    },
    watch:{
　　　　fullname: function(){this.count++},
　　}
  })
</script>    

fuiiname会保存上次计算的缓存内容，只有当firstname或lastname变化时，才会重新计算并保存数据。

当watch内数据发生变化时，计数会改变。

5.v-if，v-show，v-for命令

<div id="app">
    <button @click="click">show/hide</button>
    <div v-if="show">{{ message }}</div>
    <div v-show="show">{{ message }}</div>
    <ul><li v-for="(item,index)item of list" :key="index">{{item}}</li></ul>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue',
      show: true,
      list: [1,2,3]
    },
　　methods:{
　　　　click: function(){this.show=!this.show}
　　}
  })
</script>

将list列表的内容放到item中，位置下标放到index里。（index在不排序等改变位置的操作时可用，其他时候不行）

v-if时，当show为false时，该dom节点被注释。v-show则添加display：none的css样式。

6.todolist

<div id="app">
    <div>
        <input v-model="value"/>
        <button @click="click">提交</button>
    </div>
    <ul>
        <li v-for="item of list" :key="item">{{item}}</li>
    </ul>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      value: '',
      list:[]
    },
    methods:{click: function(){
            this.list.push(this.value)
            this.value=''
        }
    }
  })
</script>    

每点击一次提交，就会显示一个新的li，同时清除input内容。

<div id="app">
    <div>
        <input v-model="value"/>
        <button @click="click">提交</button>
    </div>
    <ul>
        <todo-item></todo-item>
    </ul>
</div>
<script>
    Vue.component('todo-item',{
       template:'<li>item</li>' 
    })

  var app = new Vue({
    el: '#app',
    data: {
      value: '',
      list:[]
    },
    methods:{click: function(){
            this.list.push(this.value)
            this.value=''
        }
    }
  })
</script>    

Vue.component()定义的组件称为全局组件，任何地方都能使用。

<ul>
    <todo-item v-for="item of list" :key="item" :content="item"></todo-item>
</ul>


var TodoItem={
  props:['content'],
  template:'<li>{{content}}</li>'   
}
new Vue({
    ……
        components:{
            'todo-item':TodoItem
        }
})

在Vue内设定局部组件，需设置props为从外部获取的参数。

<div id="app">
    <div>
        <input v-model="value"/>
        <button @click="click">提交</button>
    </div>
    <ul>
        <todo-item v-for="(item,index) of list" 
                   :key="index" 
                   :content="item"
                   :index="index" 
                   @delete1="Delete">
        </todo-item>
    </ul>
</div>
<script>
    Vue.component('todo-item',{
        props:['content','index'],
        template:'<li @click="click1">{{content}}</li>' ,
        methods:{
          click1: function(){
            this.$emit('delete1',this.index)
          }
        }
    })

  var app = new Vue({
    el: '#app',
    data: {
      value: '',
      list:[]
    },
    methods:{
        click: function(){
            this.list.push(this.value)
            this.value=''
        },
        Delete: function(index){
            /*从对应下标的位置删除1项*/
            this.list.splice(index,1)
        }
    }
  })
</script> 

todolist的删除功能。当li点击时，触发click1的事件，将向外触发一个事件，事件的名字是delete1，值是index。当发生delete1的事件时，会触发父组件的Delete事件，将list的下标删除。

7.组件与实例之间的关系

每一个组件都是Vue的一个实例，以下代码为例，每个组件都可以包含Vue的属性。可以称Vue为父组件，其他的为子组件。父组件向子组件传递值以属性的形式传递。

<div id="app">
    <div>
        <input v-model="value"/>
        <button @click="click">提交</button>
    </div>
    <ul>
        <todo-item v-for="(item,index) of list" 
                   :key="index" 
                   :content="item">
        </todo-item>
    </ul>
</div>
<script>
    Vue.component('todo-item',{
        props:['content'],
        template:'<li @click="click1">{{content}}</li>' ,
        methods:{
          click1: function(){
            alert("clicked")
          }
        }
    })

  var app = new Vue({
    el: '#app',
    data: {
      value: '',
      list:[]
    },
    methods:{click: function(){
            this.list.push(this.value)
            this.value=''
        }
    }
  })
</script> 

<div id="add">
    <input v-model="message"/>
    <div>{{ message }}</div>
</div>
<script>
  var app = new Vue({
    el: '#app',
    template: '<p>hello</p>',
    data: {
      message: 'Hello Vue!',
    }
  })
</script>