Vue:指令

v-bind示例

<div id="app-2">
		<span v-bind:title="message">
				鼠标悬停几秒钟查看此处动态绑定的提示信息!
		span>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
			var app2 = new Vue({
				el: '#app-2',
				data: {
					message: '页面加载于 ' + new Date().toLocaleString()
				}
			})
script>

v-if示例

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
			var app3 = new Vue({
				el: '#app-3',
				data: {
					seen: false
				}
			})
script>

v-else示例

<div id="app-3">
			<p v-if="seen">This is ifp>
			<p v-else>This is elsep>
		div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<script>
			var app3 = new Vue({
				el: '#app-3',
				data: {
					seen: false
				}
			})
		script>

v-else-if示例

<div id="app-3">
			<p v-if="seen==='a'">This is ifp>
			<p v-else-if="seen==='b'">This is else-ifp>
			<p v-else>This is elsep>
		div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<script>
			var app3 = new Vue({
				el: '#app-3',
				data: {
					seen: "a"
				}
			})
		script>

v-for示例

<div id="app-4">
			<ol>
				<li v-for="todo in todos">
					{{ todo.text }}
				li>
			ol>
		div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<script>
			var app4 = new Vue({
				el: '#app-4',
				data: {
					todos: [{
							text: '学习 JavaScript'
						},
						{
							text: '学习 Vue'
						},
						{
							text: '整个牛项目'
						}
					]
				}
			})
		script>

在这里,也可以用 of 替代 in 作为分隔符,因为它是最接近 JavaScript 迭代器的语法

v-on(事件监听)示例

	<div id="app-5">
			<p>{{ message }}p>
			<button v-on:click="reverseMessage">逆转消息button>
		div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<script>
			var app6 = new Vue({
				el: '#app-6',
				data: {
					message: 'Hello Vue!'
				}
			})
		script>

v-text/v-html使用示例

<div id="app">
			<p>{{message}}p>
			<p v-text="message">p>
			<p v-html="message">p>
		div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					message: '

Hello Vue!

'
} })
script>

v-cloak使用

  • 当不加v-cloak时候示例如下:
	<div id="app">{{msg}}div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<script>
			alert("没有加v-cloak")
			var app = new Vue({
				el: '#app',
				data: {
					msg: "Hello"
				}
			})
		script>

出现结果如下Vue:指令_第1张图片
这种结果肯定是不可以的,所以就有了v-cloak
示例如下:


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
		style>
	head>
	<body>
		<div id="app" v-cloak>{{msg}}div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<script>
			alert("加了v-cloak")
			var app = new Vue({
				el: '#app',
				data: {
					msg: "Hello"
				}
			})
		script>
	body>
html>

结果如下
Vue:指令_第2张图片
这种结果才是正确的

你可能感兴趣的:(#,Vue)