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>

条件与循环

条件

<div id="app">

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

</div>

<script>

var app = new Vue({

	el: '#app',

	data: {seen: true}

})

</script>

循环

<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>

处理交互

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>

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>

巴特西

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

基础语法

引入vue

声明式渲染

条件与循环

处理交互

注册组件

实例properties

模板语法

插值

指令

缩写

最新文章

热门文章