Vue.js 基础知识整理

1. Vue 简介

是JavaScript 框架；
简化Dom 操作；

2. Vue 指令【v-xxx】

2.1 v-test

设置标签的文本值

<div id="app">
	<h2 v-text="message"></h2>
</div>

// 直接将message 添加到h2 标签内部，会覆盖之前内容
var app = new Vue({
   
	el:"#app",
	data:{
   
		message:"Message content"
	}
})

// 不覆盖，只插值：插值表达式
<div id="app">
	<h2>{
   {
   message}}</h2>
</div>

// 表达式，例：字符串拼接
<div id="app">
	<h2 v-text="message+'！！！'"></h2>
	<h2>{
   {
    message + '！！！'}}</h2>
</div>

字符串、数组、对象取值方式

<div id="app">
    {
   {
    message }}
    <h2>{
   {
   school.name}}{
   {
   school.mobile}}</h2>
    <ul>
        <li>{
   {
   address[0]}}</li>
        <li>{
   {
   address[1]}}</li>
        <li>{
   {
   address[2]}}</li>
    </ul>
</div>

<script>
    var app = new Vue({
   
    el: "#app",
    data: {
   
        message: "Hello Vue!",
        school:{
   
            name:"zhangsan",
            mobile:"110"
        },
        address:["辽宁","大连","庄河"]
        }
    })
</script>

2.2 v-html

设置标签的innerHTML

<div id="app">
	<p v-html="content"></p>
</div>

var app = new Vue({
   
	el:"#app",
	data:{
   
		content:"<a href='#'>超链接</a>"
	}
})

2.3 v-on

为元素绑定事件

<div id="app">
	<input type="button" value="事件绑定" v-on:事件名="方法">
	<input type="button" value="事件绑定" v-on:click="doIt">
	<input type="button" value="事件绑定" v-on:mouseenter="doIt">