1. Concept
2. Quick start
Create a new project; select static web type project:
2.1 install vue
Use npm to install vue.js:
save stands for partial installation
2.2 Two-way binding and event handling quick start demonstration
Create a new HTML file 01-demo.html directly in the project directory:
vue_day1/01_vuedomeo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue01测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num"><button v-on:click="num++">点我</button>
<h2>{
{name}} 非常好!</h2><h2> 有{
{num}}个酷炫学科</h2>
</div>
<script type="text/javascript">
var app1=new Vue({
el:"#app", //el即element，要渲染的页面元素
data:{
name:"喜洋洋",
num:1
}
})
</script>
</body>
</html>
Click the browser button on the right side of the idea to run:
first create a Vue instance through new Vue()
and then the constructor receives an object, which has some attributes:
el: is the abbreviation of element, select the page element to be rendered by id, In this example, it is a div
data: data. The data is an object. There are many attributes in it, which can be rendered into the view.
name: here is a name attribute specified
in the h2 element on the page, through {
{name}}, To render the name attribute just defined
A new attribute is added to data: num
has an input element on the page, which is bound to num through v-model.
At the same time, through {
{num}} in the page output, it
can be observed that the change of the input box causes the num in the data to change, and the page output also changes.
Input is bound to num, and the value of input changes, which affects the value of num in data.
Page {
{num}} is bound to data num. Therefore, the value of num changes, causing the page effect to change.
Without any dom operation, this is the charm of two-way binding.
Here we use the v-on instruction to bind the click event instead of the normal onclick, and then directly manipulate num.
Normal onclick cannot directly manipulate num.
Three, life cycle and hook functions, ordinary methods
Ordinary function:
Just write "method name" directly after click, without ()
Let's demonstrate the normal function and hook function:
setting this hook function will not report an error:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>钩子函数</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app2">
<button v-on:click="add">点我</button>
<br>
{
{msg}}
</div>
<script type="text/javascript">
var app1=new Vue({
el:"#app2", //el即element，要渲染的页面元素
data:{
//初始化为空
msg:""
},
//普通函数
methods:{
add:function () {
console.log("点我了，...123")
}
},
//钩子函数
created(){
this.msg="hello vue .created";
}
});
</script>
</body>
</html>
