（24）打鸡儿教你Vue.js

学习Vue基础语法
Vue中的组件
Vue-cli的使用

1、使用Vue2.0版本实现响应式编程
2、理解Vue编程理念与直接操作Dom的差异
3、Vue常用的基础语法
4、使用Vue编写TodoList功能
5、什么是Vue的组件和实例
6、Vue-cli脚手架工具的使用
7、但文件组件，全局样式与局部样式

如何创建一个Vue实例：

直接用

开发版本和生产版本

使用cdn的形式

<body>
<div id="root">hello world {{msg}}</div><script>
new Vue({el: '#root',data: {msg: 'hello world'}
})
</script>
</body>

挂载点，模板，实例

Vue实例的挂载点为：

<div id="root">hello world {{msg}}</div>

Vue实例中的数据，事件，方法：

插值表达式：

<body><div id="root"><h1>{{number}}</h1><h1 v-text="number"></h1><h1 v-html="number"></h1><div v-on:click="helloClick">{{content}}</div><div @click="helloClick">{{content}}</div></div><script>new Vue({el: '#root',data: {msg: 'world',number: 123,content: 'hello'},methods: {helloClick: function() {alert(123)this.content = 'world'}}})
</script>
</body>

React，Angular，Vue，Hybrid

属性绑定和双向数据绑定：

<input v-model="content"/>
<div>{{content}}</div>

计算属性和侦听器

<div id="root"><input v-model="firstName"><input v-model="lastName"/><div> {{firstName}} {{lastName}} </div><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: {firstName: function() {this.count ++},
lastName: function() {this.count ++},fullName: function() {this.count ++}})
</script>

v-if,v-show,v-for

v-show会隐藏，不会销毁重新创建

添加Key值可以提升效率

<ul>
<li v-for="item of list" :key="item">{{item}}</li>
</ul>

<li v-for="(item, index) of list" :key="index">{{item}}</li>

v-if控制存在与否
v-show控制显示与否

todoList功能开发：

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

template模板<ul>
<todo-item v-for="(item, index) of list" :key="index" :content="item"></todo-item>
</ul><script>
// 定义组件 全局组件
Vue.component('todo-item', {props: ['content'],template: '<li>{{content}}</li>'
})// 局部组件
var TodoItem = {template: '<li>item</li>'
}new Vue({el； ‘#root’,components: {'todo-item': TodoItem},data: {inputValue: '',list: []},
</script>

[外链图片转存失败(img-aYpEjoQ1-1562216687021)(https://upload-images.jianshu.io/upload_images/11158618-0611be5748ad2700.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

组件与实例的关系：

Vue.component('todo-item', {props: ['content'],template: '<li @click="handleClick">{{content}}</li>',methods: {handleClick: function() {alert('clicked')}}
})

todolist删除功能：

请点赞！因为你的鼓励是我写作的最大动力！

吹逼交流群：711613774