（24）打鸡儿教你Vue.js

达达前端

发布于 2019-07-08 13:01:33

3630

发布于 2019-07-08 13:01:33

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

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

如何创建一个Vue实例：

直接用<script>引入

开发版本和生产版本

使用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会隐藏，不会销毁重新创建

image.png

添加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>

组件与实例的关系：

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

todolist删除功能：