vue基础一

发表于 | 分类于

vue入门基础

声明式渲染

响应式文本渲染

template

1
2
3
<div id="app">
    {{ message }}
</div>

script

1
2
3
4
5
6
var app = new Vue({           //new构造器，生成一个Vue的实例app
  el: '#app',                 //监听 #app, 就是<div id="app"></div>
  data: {
    message: 'hello vue'      //message,相当于是一个形参，真正要显示的是 hello vue
  }
})

响应式元素属性

template

1
2
3
4
5
<div id="app-2">
  <span v-bind:title="message">     //将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

script

1
2
3
4
5
6
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date()
  }
})

条件与循环

显示隐藏 if else

控制切换一个元素的显示
template

1
2
3
<div id="app-3">
  <p v-if="seen">现在你看到我了</p>     
</div>

script

1
2
3
4
5
6
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true         //true为显示，false为隐藏
  }
})

for循环

template

1
2
3
4
5
6
7
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

script

1
2
3
4
5
6
7
8
9
10
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

显示结果

1
2
3
1.学习 JavaScript
2.学习 Vue
3.整个牛项目

在控制台里，输入 app4.todos.push({ text: ‘新项目’ })

1
2
3
4
1.学习 JavaScript
2.学习 Vue
3.整个牛项目
4.新项目

处理用户输入

v-on 指令绑定一个事件监听器

template

1
2
3
4
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

script

1
2
3
4
5
6
7
8
9
10
11
12
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
      //根据空格，先把 Hello Vue.js! 拆开成三个部分，然后reverse()，反转顺序，join('')，拼接
    }
  }
})

点击前

1
Hello Vue.js!

点击后

1
!sj.euV olleH

v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定

template

1
2
3
4
<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

script

1
2
3
4
5
6
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

显示结果随input输入框中的，输入值变化