Vue：学习笔记-介绍
栏目: JavaScript · 发布时间: 5年前
内容简介：17年上半年，学习了一些Vue的知识，但是现在反观回去，感觉在那个时候，因为着急做项目，很多东西消化的不够清楚，这一点同样体现在对angular的学习上，现在有点时间进行修整，那就花点时间去好好整理一下。大体翻译：Vue是一个进步的框架（progressive framework），用来构建用户界面。它不像别的大而全的框架，由很小的部分，逐步增量吸收完善。它的核心库仅仅专注于view层，很容易使用，或者说是和项目的其他库集成。这段前言，好像是第一次这么清楚地读明白，枉费了作者的一番心血。
17年上半年，学习了一些Vue的知识，但是现在反观回去，感觉在那个时候，因为着急做项目，很多东西消化的不够清楚，这一点同样体现在对angular的学习上，现在有点时间进行修整，那就花点时间去好好整理一下。
正文
Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
大体翻译：Vue是一个进步的框架（progressive framework），用来构建用户界面。它不像别的大而全的框架，由很小的部分，逐步增量吸收完善。它的核心库仅仅专注于view层，很容易使用，或者说是和项目的其他库集成。
这段前言，好像是第一次这么清楚地读明白，枉费了作者的一番心血。
如何引入
在你的index.html中引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
这个是开发版本，在控制台会有一些有用的输出。
或者：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
生产版本，优化了大小和速度。
还有一些别的安装帮助，在 Installation
，初学者不建议立刻使用 vue-cli
（类似一个脚手架），这样你会搞不清原理，但我相信，大多数的人还是会立刻去使用这个，因为立刻可以做出一些东西来，能做出东西来就行，谁会在意什么原理不原理呢？
陈述式的渲染
直接渲染数据到DOM树：
html文件中（下文中，上面的代码段都表示是在html文件中，下面的代码段表示是在js文件中，可以在这个 在线模拟器 上进行尝试）：
<div id="app">
{{ message }}
</div>
js文件中：
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
绑定元素属性
<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds
to see my dynamically bound title!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
条件和循环
条件
<div id="app-3"> <span v-if="seen">Now you see me</span> </div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
循环
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
处理用户输入
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
用组件来构成
组件的概念，是一个预定义好的一些选项的Vue的实例。
定义一个组件，语法如下：
// Define a new component called todo-item
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})
其实，这个就相当于自定义了一个HTTP元素，并且这个元素是在js中得到解释的，解释成HTML原生的元素。这样可以把它组装在另外一个组件的模板里：
<ol> <!-- Create an instance of the todo-item component --> <todo-item></todo-item> </ol>
但是这样，这个组件的内容是固定的，这样没有太大意义，所以，这个内容应该是一个变量，由使用者来定义，所以，这里又设计一个 props
，来定义这个变量，如下：
Vue.component('todo-item', {
// The todo-item component now accepts a
// "prop", which is like a custom attribute.
// This prop is called todo.
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
<div id="app-7">
<ol>
<!--
Now we provide each todo-item with the todo object
it's representing, so that its content can be dynamic.
We also need to provide each component with a "key",
which will be explained later.
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
以上所述就是小编给大家介绍的《Vue：学习笔记-介绍》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- AndroidStudio笔记（2）插件介绍
- Java学习笔记(十)——Thrift入门及一些基础知识介绍
- MIT 6.824 分布式系统课程第一课：介绍笔记
- golang学习笔记17 爬虫技术路线图，python，java，nodejs，go语言，scrapy主流框架介绍
- ASP.NET Core分布式项目实战（业务介绍，架构设计，oAuth2，IdentityServer4）--学习笔记
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
JAVA 2核心技术 卷Ⅰ
[美] 霍斯特曼、[美] 科奈尔 / 叶乃文、邝劲筠 等 / 机械工业出版社 / 2006-5 / 88.00元
本书是Java技术经典参考书，多年畅销不衰，第7版在保留以前版本风格的基础上，涵盖Java2开发平台标准版J2SE5.0的基础知识，主要内容包括面各对象程序设计、反射与代理、接口与内部类、事件监听器模型、使用Swing UI工具箱进行图形用户界面设计，异常处理、流输入/输出和对象序列化、泛型程序设计等。 本书内容翔实、深入浅出，附有大量程序实例，极具实用价值，是Java初学者和Java程序员......一起来看看 《JAVA 2核心技术 卷Ⅰ》 这本书的介绍吧!
