（24）打鸡儿教你Vue.js

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

flowchart 箭头图标勿删

学习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删除功能：