vue framework learning (2)-introduction to the framework

1. What is Vue.js?

Description of the official website: Vue is a set for building user interfaces 渐进式框架. Unlike other large frameworks, Vue is designed to work 自底向上逐层应用. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when compared 现代化的工具链and various 支持类库used in combination, provide the drive Vue completely complex one-page applications.
Here are a few keywords:渐进式框架、现代化的工具链、支持类库

1. Use an example to illustrate

We have a lot of interface layout methods, div layout:
Insert picture description here
How 渐进式does Vue go to the existing interface, Vue provides a very direct way like JQuery, 直接引入包的Vue.js(this package can be downloaded directly on the official website) <script src="./vue.js"></script>, and then you are now Some interfaces use Vue things, and then the interface becomes like the following figure ,, 某个div或者是板块变成Vue框架you 现有的其他界面是完全没有影响的，现在我们界面使用出现两个不同类库，这就是Vue的现代化的工具链、支持类库, when you replace each section step by step, and finally the entire interface is the Vue framework, complete the effect of the entire interface refactoring, this is Vue's progressive framework
Insert picture description here

2. Introduce and use

Official website-to get started , there are several introduction methods detailed on the official website. I won’t talk about it here, just look at the official website

Third, the declarative rendering
core is Vue.js allows for a simple 模板语法to declaratively rendering data into the DOMsystem

I have come to write an example, which is the writing of javaScript, jQuery, and Vue to illustrate

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hello </title>
	</head>
	<body>
		<!-- javascript -->
		<h2 id="app1"> hi javascript </h2>
		<!-- jQuery -->
		<h1 id="app2" class="title"> hi juqery</h1>
		<!-- vue -->
		<div id="app3">
			<h1>{
   
   {message}}</h1>
			<ol>
				<li v-for="item in lists">{
   
   {item.index}}{
   
   {item}}</li>
			</ol>
		</div>
	</body>
    <script src="./jquery.min.js"></script>
	<script src="./vue.js"></script>
	<script>
		var h1 =document.getElementById("app1")
		h1.innerHTML='嘻嘻'
		
		$(function(){
			var h1 = $("#app2");
			$('.title').html('hello jquery');//修改后的内容
		})
		
		const app = new Vue({
			el: "#app3",
			data: {
				message: "hello vue",
				lists: ["java","C","C++","Vue","react"]
			}
		})
	</script>
</html>

1. javaScript、jQueryThe writing method of the two is to execute step by step according to the written code, and finally realize the interface effect. This kind of programming method is what we say 命令式编程, that is, we come告诉计算机，你第一步干什么，第二步干什么，第三步...

2. Vue, It just gives the ID to Vue el这个元素做管理, and then data做数据DOM, without those steps, we see it on the surface, it's very concise. But if you know the Vue source code, you will know that Vue has actually done a lot of operations, but we haven't seen these operations. Now 数据和 DOM 已经被建立了关联, 所有东西都是响应式的,这就是一个声明式渲染. How do we confirm it? Open the JavaScript console of your browser (just open on this page), and modify the value of app.message, you will see the above example update accordingly.

Learning reference: binggoling