第一章 初识Vue

Posted 2020-09-19 幺刀

一 前提

引入vue.js:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

二 数据渲染方式

• {{}}
• v-bind

1 {{}}

可以通过这种简洁的模板语法来声明式的将数据渲染进 DOM：

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

var app = new Vue({
    el:‘#app‘,
    data: {
        msg:‘resume vue‘
    }
})

2 v-bind

v-bind称为指令，主要用于绑定DOM元素属性，指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。以下是v-bind的应用：

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

var app2 = new Vue({
    el:‘#app2‘,
    data: {
        msg:‘页面加载于 ‘ + new Date()
    }
})

三 条件与循环

v-if、v-for分别用于条件与循环。

1 v-if

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


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

　　此时当我们在浏览器console里输入app-3.seen=true，就可以发现在页面上的“你现在可以看到我了”

2 v-for

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

var app4 = new Vue({
	el : "#app4",
	data : {
		todos:[
			{text : ‘javascript‘},
			{text : ‘vue‘},
			{text : ‘angular‘},
			{text : ‘react‘}
		]
	}		
})