vue学习记录

语法介绍

序号	语法	示例	说明
1	v-once		只插入一次，值的更新不会影响页面
2	v-bind	v-bind:title="message" 缩写:title=“message”	元素绑定(title,value等等，或自定义元素)
2	v-bind:[]	v-bind:[testurl]=“url”	tesurl无法区分大小写
3	v-if	v-if=“seen”	条件判断
4	v-for	v-for=“todo in todos”	遍历
5	v-on:click	v-on:click="reverseMessage" 缩写:@click=“reverseMessage”	事件触发
6	v-html		输出html代码，将标签下的数据替换
7	{{ 方法名() }}	{{ addtest() }}	调用方法

一、普通消息输出
通过id(app–>#app)定位消息输出位置，并将data里的变量(message)输出到html页面的指定位置{{message}}

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

二、元素特征绑定
关键字:v-bind

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

三、条件判断
关键字：v-if

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

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

四、遍历
关键字:v-for

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

五、事件
关键字:v-on

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
   <button v-on:mouseover="mouserover">{{shell}}</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!',shell:'shell'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    },
    mouseover: function (){
		this.shell = this.shell.split('').reverse().join('')
	}
  }
})

六、计算属性
关键字：computed

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

使用get和set方法

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}