vue的初体验

时间 2019-11-30

标签 vue 体验繁體版

原文原文链接

vue是什么

Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不一样的是，Vue 被设计为能够自底向上逐层应用。Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化的工具链以及各类支持类库结合使用时，Vue 也彻底可以为复杂的单页应用提供驱动。javascript

1.建立项目：

vue.js 文件自行下载便可，目前这些目录都是空的。html

声明式渲染

Vue.js 的核心是一个容许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
编写index.html:vue

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>demo</title>
</head>
<body>
<div id="app">
	{{ message }}
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript"> //构造一个vue实例，Vue.js 的核心是一个容许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： var app = new Vue({ // vue指向的目的地 el: '#app', // vue的数据部分 data:{ message:'hello vue!' } }) </script>
</body>
</html>

页面显示：
咱们已经成功建立了第一个 Vue 应用！看起来这跟渲染一个字符串模板很是相似，可是 Vue 在背后作了大量工做。如今数据和 DOM 已经被创建了关联，全部东西都是响应式的。咱们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，

你将看到页面上也将相应地更新；java

指令系统

指令带有前缀v-,以表示它们是vue提供的特殊性。它们会在渲染的DOM上应用特殊的响应式行为。python

v-bind 指令

继续在index.html中添加代码：web

<div id="app2" v-bind:title="message">
	鼠标悬停几秒在这查看绑定的动态信息！
</div>
<script type="text/javascript"> // 使用一个指令 var app2 = new Vue({ el: '#app2', data: { message: '页面加载于' + new Date().toLocaleString() } }) </script>

效果如图：

这个指令的的意思是：将这个元素节点的title特性的vue是来的message属性保持一致。若是打开浏览器的 JavaScript 控制台，输入 app2.message = ‘新消息’，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。浏览器

v-if 条件

代码：app

<div id="app4">
	<ol>
		<li v-for="data in datas">
			{{ data.test }}
		</li>
	</ol>
</div>
<script type="text/javascript"> //v-if指令 var app3 = new Vue({ el: "#app3", data:{ seen: true } }) </script>

效果如图：
继续在控制台输入app3.seen = false, 显示的Can you see me?已经消失了。这个例子演示了咱们不只能够把数据绑定到 DOM 文本或特性，还能够绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，能够在 Vue 插入/更新/移除元素时自动应用过渡效果。框架

v-for指令

<div id="app4">
	<ol>
		<li v-for="data in datas">
			{{ data.test }}
		</li>
	</ol>
</div>
<script type="text/javascript"> // v-for 指令 var app4 = new Vue({ el: '#app4', data:{ datas: [ {test: 'python很棒！'}, { test:'vue 初体验' }, { test: 'v-for指令' }, ] } }) </script>

效果：
在控制台里，输入 app4.todos.push({ text: ‘新项目’ })，你会发现列表最后添加了一个新项目。svg

v-on 指令

为了让用户和你的应用进行交互，咱们能够用 v-on 指令添加一个事件监听器，经过它调用在 Vue 实例中定义的方法

代码：

<div id="app5">
	<p>{{ message }}</p>
	<button v-on:click="reverseMessage">反转消息</button>
</div>
<script type="text/javascript"> // v-on指令 var app5 = new Vue({ el: '#app5', data:{ message:'good vue.js' }, methods:{ reverseMessage:function(){ this.message = this.message.split('').reverse().join('') } } }) </script>

效果图：
点击前
点击后
注意在 reverseMessage 方法中，咱们更新了应用的状态，但没有触碰 DOM——全部的 DOM 操做都由 Vue 来处理，你编写的代码只须要关注逻辑层面便可。

v-model 指令

<div id="app6">
	<p>{{ message }}</p>
	<input v-model="message" type="" name="">
</div>
<script type="text/javascript"> //v-model 指令 var app6 = new Vue({ el: '#app6', data: { message: '输入到input框中' } }) </script>

效果图：
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。