Table of contents
1.{ {xxx }} interpolation syntax
1. One-way data binding v-bind is a one-way binding instruction
2. Two-way data binding v-model can achieve two-way data binding.
6. Two ways of writing data and el
1.Vue features
1. Adopt componentized model to improve code reuse rate and make code easier to maintain.
Analysis: A .vue file is a component, and each component does not affect each other. When other projects require a certain component, just move the component over and use it directly.
2. Writers do not need to directly operate the DOM , which improves development efficiency.
3. Use virtual DOM + excellent Diff algorithm to reuse DOM nodes as much as possible.
2.Vue installation
3.Vue first instance
<!-- 引入开发版本的Vue 全局就多了一个 Vue的构造函数 -->
<script src="../js/vue.js"></script>
<body>
<!-- 1.准备一个容器 -->
<div id="app">
<h1>hello,{
{name}}</h1>
</div>
<script>
//创建vue实例 配置项里面的key值不能乱改
new Vue({
el:'#app', //el用于指定当前Vue实例为哪个容器服务，通常为CSS选择器字符串
data:{
name:'Vue第一天' //data中用于存储数据，数据供 el所指定的容器 去使用(容器之外就不能使用),指暂时先写为一个对象
}
});
</script>
</body>Analysis summary 1:
1. If you want Vue to work, you must create a Vue instance and pass in a configuration object.
2. The code in the app container still serves the HTML specification, but some special Vue syntax is mixed in { {}}
3. The code in the app container is called a Vue template
Note 1: There is a one-to-one relationship between containers and Vue instances . One container can only correspond to one Vue instance, and one Vue instance can only correspond to one container.
Note 2: The special Vue syntax { {}} in the app container, double curly brackets can only be JS expressions
Pay attention to the distinction here: JS expressions and JS statements
01.JS expression: An expression will generate a value and can be placed anywhere a value is required.
（1）a
（2）a + b
(1) demo(1) function expression
(1) x===y? 'a' : b ternary expression
02.JS code (statement)
（1）if(){ }
（2）for(){ }
<!-- 1.准备一个容器 -->
<div id="app">
<h1>hello,{
{name}},{
{Date.now()}},{
{1+1}}</h1>
</div>
<script>
//创建vue实例 配置项里面的key值不能乱改
new Vue({
el:'#app', //el用于指定当前Vue实例为哪个容器服务，通常为CSS选择器字符串
data:{
name:'Vue第一天' //data中用于存储数据，数据供 el所指定的容器 去使用(容器之外就不能使用),指暂时先写为一个对象
}
});
</script>result:
Note 3: Hierarchical display of data in data
Analysis summary 2:
4. There is a one-to-one relationship between the container and the Vue instance.
5. In real development, there is only one Vue instance , and it will be used together with components .
6. The xxx in {{xxx}} needs to be written as a js expression , and xxx can automatically read all attributes in the data.
7. Once the data in data changes, the places where the data is used in the template will be automatically updated.
4.Vue template syntax
1.{ {xxx }} interpolation syntax
Interpolation syntax is generally used for the content inside the tag body : <h1>Content inside the tag body</h1>
eg:<h1>{ {name}}</h1>
2.v-xxx command syntax
eg: Let's use v-bind as an example to parse label attributes: v-bind can be abbreviated as: eg: v-bind:href='xxx' is: href='xxx'
<!-- 1.准备一个容器 -->
<div id="app">
<h1>插值语法</h1>
<h1>hello,{
{name}}</h1>
<hr>
<h1>指令语法</h1>
<a v-bind:href="url">点我去百度查Vue2文档</a>
<a :href="url.toUpperCase()">点我去百度查Vue2文档</a>
</div>
<script>
new Vue({
el:'#app', //el用于指定当前Vue实例为哪个容器服务，通常为CSS选择器字符串
data:{
name:'Vue第一天', //data中用于存储数据，数据供 el所指定的容器 去使用(容器之外就不能使用),指暂时先写为一个对象
url:'https://www.baidu.com'
}
});
</script>
v-bind can dynamically bind a value to any attribute of the tag. In the above code, v-bind dynamically binds a value to the href attribute of the a tag, "url". At this time, it is not a string, url. is an expression corresponding to the url in data
Analysis summary 3:
There are two main categories of Vue template syntax:
1. Interpolation syntax :
Function: used to parse tag body content
Writing method: { {xxx}}, xxx is a JS expression , and can directly read all attributes in data
2. Instruction syntax :
Function: Used to parse tags (including: tag attributes, tag body content, binding events...)
For example: v-bind:href = "xxx" or abbreviated as :href = "xxx" , xxx also needs to write JS expression,
And can directly read all attributes in data
Note: There are many instructions in Vue, and they are all in the form: v-???.
5.Vue data binding
1. One-way data binding v-bind is a one-way binding instruction
<!-- 1.准备一个容器 -->
<div id="app">
单向数据绑定: <input type="text" v-bind:value="name">
</div>
<script>
new Vue({
el:'#app',
data:{
name:'天空'
}
})
</script>
2. Two-way data binding v-model can achieve two-way data binding.
v-model:value can be abbreviated as v-model, because v-model collects value by default
<!-- 1.准备一个容器 -->
<div id="app">
单向数据绑定: <input type="text" v-bind:value="name">
<br>
双向数据绑定: <input type="text" v-model:value="name">
<br>
双向数据绑定: <input type="text" v-model ="name">
</div>
<script>
new Vue({
el:'#app',
data:{
name:'天空'
}
})
</script>
important point:
The following code is wrong because v-model can only be applied to form elements (input elements with value)
<h2 v-model:x="name">你好啊</h2>
Analysis summary 4:
There are 2 ways of data binding in Vue:
1. One-way binding (v-bind) : data can only flow from data to page
2. Two-way binding (v-model) : Data can not only flow from data to page, but also from page to data.
Remark:
1. Two-way binding is generally applied to form elements (such as input, select, etc.)
2. v-model:value can be abbreviated as v-model, because v-model collects value by default.
6. Two ways of writing data and el
1.Two ways of writing el
Writing method 1:
<script>
new Vue({
//el的第一种写法
el:'#app',
data:{
name:'天空'
}
})
</script>Writing method 2: Using Vue instances
<!-- 1.准备一个容器 -->
<div id="app">
你好，{
{name}}
</div>
<script>
const v = new Vue({
data:{
name:'天空a'
}
});
//利用实例对象原型上面的 $mount()挂载
v.$mount('#app'); //el的二种写法
</script>Analysis: Both methods can be used, the second method is more flexible
2. Two ways of writing data
Writing method 1: object style
<script>
new Vue({
el:'#app',
//data的第一种写法 对象式
data:{
name:'天空'
}
})
</script>Writing method 2: Functional style, data is written as a function , the function return value is an object , and the object contains the data that needs to be used.
<!-- 1.准备一个容器 -->
<div id="app">
你好，{
{name}}
</div>
<script>
const v = new Vue({
//data 的第二种写法：函数式
data:function(){
console.log(this,11111); //Vue {_uid: 0, _isVue: true, __v_skip: true, _scope: EffectScope, $options: {…}, …
return {
name:'天空啊'
}
}
}).$mount('#app');
</script>Note: The data function cannot be written as an arrow function . If it is written as an arrow function, this will point to the window . You must write function.
Keywords, or use ES6 syntax.
Analysis summary 5:
1.el has 2 ways of writing
(1) Configure the el attribute when new Vue
(2) First create a Vue instance, and then specify the value of el through instance.$mount('#app')
2. There are two ways to write data
(1) Object type
(2) Functional formula
How to choose: Generally speaking, any one is fine, but when learning components, the data must be in functional form, otherwise an error will be reported.
3.An important principle:
For functions managed by Vue , you must not write arrow functions . Once you write an arrow function, this is no longer a Vue instance.
Functions managed by Vue: written in the configuration object of Vue. For example, the functional writing method of data is a function managed by Vue.