Vue.js

最基础语法

//导入js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

---------------------------------------声明--------------------------------------------
<div id="app">
  {{ message }}
</div>


//声明
<script>
  var app = new Vue({
    el: '#app',                     //元素选择器
    data: {
      message: 'Hello Vue!'
    }
  })
</script>
-------------------------------------条件----v-if---------------------------------------
<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

<script>
  var app3 = new Vue({
    el: '#app-3',
    data: {
      seen: true
    }
  })
</script>
-------------------------------------循环---v-for------------------------------------------
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

<script>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})
</script>
--------------------------------用户输入----v-on--事件监听------------------------------------
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

<script>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>
-------------------------------双向绑定--v-model---------------------------------------------
<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<script>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
---------------------------------------数据--响应式----------------------------------------------
<script>
// 可以提前声明数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3
</script>
----------------------------------阻止数据响应-Object.freeze(obj)------------------------------
<script>
var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})
</script>
-----------------------前缀$-----与用户定义的属性区分开---------------------------------------
<script>
var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法,可以获得变量变化前后的值
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})
</script>

---------------------------------------------------------------------------------------------

生命周期

image

• 使用生命周期函数在不同的阶段执行不同代码

<script>
new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"
</script>

模板语法

• 输出原始HTML v-html

<p>Using mustaches: {{ rawHtml }}</p>                     //只会输出字符串
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

• v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素

<p v-if="seen">现在你看到我了</p>

• v-bind 指令可以用于响应式地更新 HTML 特性---监听属性

<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

• v-on 监听事件方法

<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

条件渲染

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

• 有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。而v-if会对元素真正的销毁和重建

<h1 v-show="ok">Hello!</h1>

事件监听

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

<script>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})</script>

• 事件修饰符

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

表单

组件

• 组件结构

image

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {                                      // 一个组件的 data 选项必须是一个函数
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})


//使用
<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })      //实例化

• 组件属性

//定义组件
Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

//使用主键和其属性title
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

结果