VUE学习-基础（基础语法 & 模板语法）

基础语法

引入vue

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

声明式渲染

<div id="app">
<!-- v-bind attribute 被称为指令 -->
	<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span></div>
<script>
var app = new Vue({
	el: '#app',
	data: {message: '页面加载于 ' + new Date().toLocaleString()}
})
</script>

条件与循环

1. 条件

   <div id="app">
   	<p v-if="seen">现在你看到我了</p>
   </div>
   <script>
   var app = new Vue({
   	el: '#app',
   	data: {seen: true}
   })
   </script>
   

2. 循环

   <div id="app">
   	<ol>
   		<li v-for="todo in todos">{{ todo.text }}</li>
   	</ol>
   </div>
   <script>
   var app = new Vue({
   	el: '#app',
   	data: {
   		todos: [
   			{text: '学习 JavaScript' },
   			{ text: '学习 Vue' },
   			{ text: '整个牛项目' }
   		]
   	}
   })
   </script>
   

处理交互

1. v-on

   <div id="app">
   	<p>{{ message }}</p>
   	<button v-on:click="reverseMessage">反转消息</button>
   </div>
   <script>
   var app = new Vue({
   	el: '#app',
   	data: {message: 'Hello Vue.js!'},
   	methods: {
   		reverseMessage: function () {
   			this.message = this.message.split('').reverse().join('')
   		}
   	}
   })
   </script>
   

2. v-model

   <div id="app">
   	<p>{{ message }}</p>
   	<input v-model="message">
   </div>
   <script>
   var app = new Vue({
   	el: '#app',
   	data: {message: 'Hello Vue!'}
   })
   </script>
   

注册组件

<div id="app">
	<ol>
		<!--为每个 todo-item 提供 todo 对象,提供为组件参数-->
		<todo-item v-for="item in groceryList" v-bind:key="item.id"v-bind:todo="item"></todo-item>
	</ol>
</div>
<script>
Vue.component('todo-item', {
	props: ['todo'],
	template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
	el: '#app',
	data: {
		groceryList: [
			{ id: 0, text: '蔬菜' },
			{ id: 1, text: '奶酪' },
			{ id: 2, text: '随便其它什么人吃的东西' }
		]
	}
})
</script>

实例properties

Vue 实例还暴露了一些有用的实例 property与方法。它们都有前缀 $

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` 改变后调用 })

模板语法

插值

<!--1. 文本 -->
<span v-once>这个将不会改变: {{ msg }}</span>
<!--2. HTML -->
<!--动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。 -->
<span v-html="rawHtml"></span>
<!--3.Attribute -->
<div v-bind:id="dynamicId"></div>
<!--4.value是表达式 -->
<div v-bind:id="'list-' + id"></div>

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。

<!--1.静态参数 -->
<a v-bind:href="url">...</a>
<!--2.动态参数 -->
<!-- 空格和引号，放在 HTML attribute 名里是无效的 -->
<!-- 需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写 -->
<a v-on:[eventName]="doSomething"> ... </a>
<a v-bind:['foo' + bar]="value"> ... </a><!-- 这会触发一个编译警告 -->
<!--3.修饰符 -->
<form v-on:submit.prevent="onSubmit">...</form>

缩写

<!--1.v-bind -->
<a :href="url" :[key]="name">...</a>
<!--2.v-on -->
<a @click="doSomething" @[event]="doOtherthing">>...</a>