Article Directory
1 Introduction
2, Vue Introduction
- ① JavaScript framework
- ② Dom simplify operations
- ③ responsive data driver
3. What is Dom?
document document object model Object model, Dom translation Chinese: Document Object Model
DOM is an HTML and XML documents for the programming interface. Many times we will use javascript acting on the website so as to achieve a certain effect function. And a lot of controls and javascript call DOM methods defined. Sometimes we take for example a tag (a) information will be used by the javascript code below: document.getElementsByTagName ( "a") Document Interface is DOM1 core (Core DOM1) first interface defined in the specification, the document is Document implements a host object interface. document pages in control of everything. DOM1 core of the Document interface defines the getElementsByTagName () method. This method returns a list of nodes (a NodeList), i.e. an array comprising a node unique DOM, contains all the labels meet the matching parameter conditions, arranged in order of appearance in the document. So anchorTags became a variable node list now.
4, a first Vue program (the Hello Vue)
- Importing development version of Vue.js
- Vue created instance of an object, and data properties provided el
- Use simple template syntax to render the data on the page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{message}}{{name}}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message: "Hello Vue !",
name: ' by yangchaoyi'
}
});
</script>
</body>
</html>
- display effect
5, el mount point issues
- ① What scope Vue instance is it?
- Whether ② can use other selectors?
- ③ You can set whether other dom elements?
The first question: What is the scope Vue instance is it?
For example, we write on the external elements {{message}}
The results showed:
A: descendant elements element Vue will manage el option and hit the inside of the
The second question: Can I use other selectors?
A: Of course we can, we can use the class, there css there are other labels, etc.
However, when developed, we generally will use default id selector, while the class and some of the labels it can hit multiple elements, and the id selector makes us think this is the only default, it is recommended to select Id selector
The following two examples simply try:
① use the class
- display effect
② using a div div tags because only we can test it
- display effect
The third question: Can I set up another dom elements?
A: You can use other double label, but you can not use HTML and BODY
6, data: data object
- ① Vue data used in data definitions
- ② data can be written in complex types of data
- ③ when rendering complex data types, you can follow the syntax of js
The following shows a simple example of the use of objects and arrays:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序</title>
<!-- 开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<h3>{{school.name}} {{school.phone}}</h3>
<h3>专业：</h3>
<li>{{array[0]}}</li>
<li>{{array[1]}}</li>
<li>{{array[2]}}</li>
<li>{{array[3]}}</li>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message: "Hello Vue !",
school:{
name:'湖南大学',
phone:'123456'
},
array:['计算机','市场营销','信息管理','医学信息工程']
}
});
</script>
</body>
</html>
- display effect
学如逆水行舟，不进则退
