Vue basic grammar (personal study notes 1)

friendly reminder

First look at the article directory to get a general understanding of the structure of the knowledge points. You can directly click on the article directory to jump to the specified location of the article.

Chapter 1, vue overview

1.1) vuej introduction

It is a framework for building user interfaces Vue is a JavaScript front-end framework for building user interfaces.
Declarative rendering: Vue extends a template syntax based on standard HTML, allowing us to declaratively describe the relationship between the final output HTML and JavaScript state.
Responsiveness: Vue automatically tracks JavaScript state and reactively updates the DOM when it changes.
Progressive Framework​:
Vue is a framework and an ecosystem. Its functions cover most of the common needs of front-end development. But the Web world is very diverse, and what different developers build on the Web can vary widely in form and scale. With this in mind, Vue has been designed with a strong focus on flexibility and "can be gradually integrated".

1.2) Vue Peripheral Library

1. vue-cli: vue pedestal
2. vue-resource
3. axios: asynchronous
4. vue-router: routing
5. vuex: state management
6. element-ui: Vue-based UI component library (PC side)
   …

1.3) The idea of ​​MVVM

①MVC idea
1. M Model (domain, service, serviceimpl.utils.pojo.mapper)
2. V view (thymeleaf jsp html ${user})
3. C controller (receiving front-end request (controller))
②MVVM idea
1. Model: corresponds to the domain model of the data layer, which mainly synchronizes the domain model. The synchronization of the client and server business models is completed through APIs such as Ajax/fetch. In the relationship between the model layers, it is mainly used to abstract the Model of the view in the ViewModel. Personal understanding: the backend provides API, and the backend service architecture is controller + data model or pure controller.
2. View: View is used as a view template to define structure and layout. It does not process the data itself, but only presents the data in the ViewModel. In addition, in order to associate with ViewModel, what needs to be done is the declaration of data binding, the declaration of instruction, and the declaration of event binding. There is a two-way binding between ViewModel and View , which means that changes in ViewModel can be reflected in View, and changes in View can also change the data value of ViewModel.
3. ViewModel: ViewModel plays the role of connecting View and Model, and is also used to process the logic in View. In the MVC framework, the view model interacts with the model by calling methods in the model. However, in MVVM, there is no direct relationship between View and Model. In MVVM, ViewModel obtains data from Model and then applies it to View. Personal understanding: The web server on the front end of the web performs two-way binding rendering on the View.
4. The entire MVVM actually realizes the separation of the front and back ends, and realizes the interaction between the front and back ends through the API, and the front end renders the page through pure js or a two-way binding framework.

Chapter 2, Using Vue with CDN

2.1) Vue simple import: import js file

①Download the Vue.js file from the official website: Vue official website: Get started quickly

Copy the vue.js file to IDEA

②Change IDEA’s recognition of js syntax: change it to ECMAScript6 as shown in the figure

③Download the Vue plug-in in IDEA, install the plug-in to facilitate identification of Vue upgrades

④Download and install the developer tools in the browser
Chrome browser and install the Vue.js devtools plug-in
1. Browser access minimal plugin

2. Search the vue DevTools plugin in the search box in the upper right corner

3. Unzip the plug-in just downloaded locally, as shown in the figure after decompression:

4. Open Google Chrome – More Tools – Extensions
Note: Open the developer mode

5. Drag the decompressed file into the extension program page to install, and the installation is successful

2.2) Simple Vue program

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <!--{
    
    {}}：插值语法  是以文本内容的形式给某个dom元素提供叶子节点-->
        <h1>
            {
   
   {name}}--{
   
   {age}}--{
   
   {sex}} --{
   
   {1+1}}
        </h1>
        <p>
            {
   
   {love}}
        </p>
        <hr/>
        User对象:<p>{
   
   {user.uname}}--{
   
   {user.uage}}</p>
        users数组：<p>{
   
   {users[0].uname}}</p>
        <p>{
   
   {users[1].uname}}</p>
        <p>{
   
   {users[2].uname}}</p>
    </div>
</body>
<!--vue对象一般写在body体下面-->
    <script>
        //这样写当前vue对象只能作用在当前的html上
        new Vue({
      
      
            el:"#root",//vue要把数据渲染到哪个html容器上
            data:{
      
      //vue的数据  只要符合键值对都行
                name:"大朗",
                age:18,//js值
                sex:true,
                love:"<h2>看书</h2>",//以文本显示
                user:{
      
      "uname":"西门","uage":20},//  js对象  对象类型的参数
                users:[{
      
      "uname":"金莲","uage":20},{
      
      "uname":"王婆","uage":60},{
      
      "uname":"武松","uage":16}]
            },
            methods:{
      
      //vue提供的函数

            }
        });
    </script>
</html>

The page after running is as follows

Chapter 3, Basic Grammar of Vue

3.1) Vue data binding (one-way and two-way)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <!--单向绑定和双向绑定-->
        <!--单向绑定:v-bind:属性名  把vue对象中的data的可以绑定到标签的指定属性上-->
        <font v-bind:color="myColor">文本信息</font>
        <!--<p v-bind:color="myColor">这是一个p标签</p>-->
        姓名:<input :type="myType" name="uname" :value="myNameValue"/>
        <!--单向绑定的简化书写：:属性名-->
        <hr/>
        <!--双向绑定:v-model  一般用在value上  data中的数据可以绑定到html属性上
                    当html属性值发生改变data中的对应值也会发生改变-->
        姓名双向绑定:<input :type="myType" name="uname" v-model="myNameValue"/><br/>
        密码双向绑定:<input type="password" name="uname" v-model="myPwdValue"/><br/>

    </div>
</body>
<!--vue对象一般写在body体下面-->
    <script>
        //这样写当前vue对象只能作用在当前的html上
        new Vue({
      
      
            el:"#root",//vue要把数据渲染到哪个html容器上
            data:{
      
      //vue的数据  只要符合键值对都行
                myColor:"green",
                myType:"text",
                myNameValue:"请输入用户名111",
                myPwdValue:""
            },
            methods:{
      
      //vue提供的函数

            }
        });
    </script>
</html>

3.2) Function of vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <p v-on:click="show($event)">show函数</p>
        <p @click="show()">@show函数</p>
        <p @click="methodDemo1($event,18)">有参函数</p>
        <p @click="methodDemo1(18)">有参函数1</p>
    </div>
</body>
<!--vue对象一般写在body体下面-->
    <script>
        //这样写当前vue对象只能作用在当前的html上
        new Vue({
      
      
            el:"#root",//vue要把数据渲染到哪个html容器上
            data:{
      
      //vue的数据  只要符合键值对都行

            },
            methods:{
      
      //vue提供的函数
                //函数的触发需要事件绑定  vue使用v-on:事件
                show(event){
      
      
                    console.log("this对象:",this)
                    console.log("event对象:",event)
                    alert("show函数")
                },
                methodDemo1(num){
      
      
                    alert(num)
                }
            }
        });
    </script>
</html>

3.3) A small exercise of vue's function and data binding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        num1:<input type="text" v-model="num1"><br/>
        <select v-model="code">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select><br/>
        num2:<input type="text" v-model="num2"/>
        <input type="button" value="=" @click="addNum()"/><br/>
        结果是:{
   
   {sum}}
    </div>
</body>
<!--vue对象一般写在body体下面-->
    <script>
        //这样写当前vue对象只能作用在当前的html上
        new Vue({
      
      
            el:"#root",//vue要把数据渲染到哪个html容器上
            data:{
      
      //vue的数据  只要符合键值对都行
                num1:"",
                code:"+",
                num2:"",
                sum:""
            },
            methods:{
      
      //vue提供的函数
                addNum(){
      
      
                    if(this.code=="+"){
      
      
                        this.sum = parseInt(this.num1)+parseInt(this.num2)
                    }else if(this.code=="-"){
      
      
                        this.sum = parseInt(this.num1)- parseInt(this.num2)
                    }
                    else if(this.code=="*"){
      
      
                        this.sum = parseInt(this.num1)* parseInt(this.num2)
                    }else if(this.code=="/"){
      
      
                        this.sum = parseInt(this.num1)/ parseInt(this.num2)
                    }

                }
            }
        });
    </script>
</html>

3.4) this object in vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        姓名:{
   
   {name}}
        年龄:{
   
   {age}}
        <button @click="changeAge()">改变年龄</button>
    </div>
</body>
<!--vue对象一般写在body体下面-->
    <script>
        //这样写当前vue对象只能作用在当前的html上
        new Vue({
      
      
            el:"#root",//vue要把数据渲染到哪个html容器上
            data:{
      
      //vue的数据  只要符合键值对都行
                name:"大朗",
                age:18
            },
            methods:{
      
      //vue提供的函数
                changeAge(){
      
      //这个函数是绑定在vue对象身上的  谁想调用函数  必须先找到vue对象
                    console.log("this对象:",this)
                    this.addAge();
                },
                addAge(){
      
      //年龄+1
                    this.age = this.age+2
                }
            }
        });
    </script>
</html>

3.5) Events and event modifiers

1.prevent: prevent the default event (commonly used)
itself contains the event to prevent its own event, and trigger the event bound by vue
2.stop: prevent the event from bubbling (commonly used)
when there are click events in the parent and child elements, in order to trigger the child element When the event in the parent element does not trigger the event in the parent element, you can add stop to the child element event to prevent the parent tag event from bubbling; 3.once:
the event is only triggered once (commonly used);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <form action="">
            账号:<input type="text" name="loginName" v-model="uname"><br/>
            密码:<input type="password" name="loginPwd" v-model="upwd"><br/>
            <!--prevent:组织当前标签的默认事件，阻止submit提交-->
           <!-- <input type="submit" value="提交" @click.prevent="loginUser()">-->
            <input type="submit" value="提交" @click="loginUser($event)">
        </form>
        <div @click="fatherShow()">父元素
            <h1 @click.stop.once.prevent="sonShow()">这是p标签的子元素</h1>
        </div>
    </div>
</body>
<!--vue对象一般写在body体下面-->
    <script>
        //这样写当前vue对象只能作用在当前的html上
        new Vue({
      
      
            el:"#root",//vue要把数据渲染到哪个html容器上
            data:{
      
      //vue的数据  只要符合键值对都行
                uname:"",
                upwd:""
            },
            methods:{
      
      //vue提供的函数
                loginUser(event){
      
      
                    event.preventDefault();//阻止当前标签的默认事件
                    alert("这是vue的提交函数111")
                },
                fatherShow(){
      
      
                    alert("父标签</div>的show")
                },
                sonShow(){
      
      
                    alert("子标签h1的show")
                }
            }
        });
    </script>
</html>

3.6）v-if和v-show

v-show
写法：v-show="表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

v-if
格式：
(1)v-if="表达式" 
(2)v-else-if="表达式"
(3)v-else="表达式"
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，要求结构不能被“打断”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <font color="green" v-if="age>=18">成年人随便进入</font>
        <font color="red" v-if="age<18">未成年人禁止入内</font>
        <hr/>
        <font color="green" v-show="age>=18">成年人随便进入</font>
        <font color="red" v-show="age<18">未成年人禁止入内</font>
        <hr/>
        <p v-if="age>=0 && age<6">0-6岁是婴幼儿</p>
        <p v-else-if="age>=6 && age<18">6-18岁是青少年</p>
        <p v-else-if="age>=18 && age<60">18-60岁是中年</p>
        <p v-else-if="age>=60 && age<120">60-120岁是老年</p>
        <p v-else>你输入的年龄有误</p>
    </div>
</body>
<!--vue对象一般写在body体下面-->
    <script>
        //这样写当前vue对象只能作用在当前的html上
        new Vue({
      
      
            el:"#root",//vue要把数据渲染到哪个html容器上
            data:{
      
      //vue的数据  只要符合键值对都行
                age:16
            },
            methods:{
      
      //vue提供的函数

            }
        });
    </script>
</html>

3.7）v-for

v-for:
	1.用于展示列表数据
	2.语法：v-for="(item, index) in xxx" :key="yyy"
	3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <p v-for="(i,n) in arr" >{
   
   {n}}--{
   
   {i}}</p>
        <hr/>
        <p v-for="(user,index) in users" >{
   
   {index}}=={
   
   {user.uname}}--{
   
   {user.uage}}</p>
        <hr/>
        对象的遍历
        <p v-for="(v,k) in person" >{
   
   {k}}--{
   
   {v}}</p>
        <hr/>
        字符串遍历:
        <p v-for="(c,index) in str">{
   
   {c}}</p>
        <hr/>普通的数字遍历
        <p v-for="(num,index) in 5">{
   
   {num}}</p>
        <hr/>
        <table>
            <tr>
                <td>名字</td>
                <td>年龄</td>
            </tr>
            <tr v-for="(u) in users">
                <td>{
   
   {u.uname}}</td>
                <td>{
   
   {u.uage}}</td>
            </tr>
        </table>

    </div>
</body>
<!--vue对象一般写在body体下面-->
    <script>
        //这样写当前vue对象只能作用在当前的html上
        new Vue({
      
      
            el:"#root",//vue要把数据渲染到哪个html容器上
            data:{
      
      //vue的数据  只要符合键值对都行
                arr:[1,2,3,4,5],
                users:[{
      
      "uname":"大朗","uage":18},{
      
      "uname":"西门","uage":18},{
      
      "uname":"金莲","uage":18}],
                person:{
      
      "pname":"张三丰","page":103},//js对象  map集合==json格式
                str:"abcdefg",//['a','b','c','d']
            },
            methods:{
      
      //vue提供的函数

            }
        });
    </script>
</html>

Chapter 4, the life cycle of vue

4.1) Introduction to life cycle

①The life cycle of Vue is the whole process from the creation to the destruction of the Vue instance, that is, the beginning of new Vue() is the beginning of the Vue life cycle.
② A series of processes from the beginning to create, initialize data, compile templates, mount Dom -> render, update -> render, uninstall, etc., are called the life cycle of Vue.
③The hook function is an interface that is open to the outside world for programmers to operate Vue at each stage in the Vue life cycle. Vue has 8 hook functions.

4.2) Four functions to create and mount

① beforeCreate (before creation)
At this time, after the instance is created, el and data are not initialized, and data and method cannot be accessed. Generally, no operations are performed at this stage.
② Created (after creation)
At this time, the data and method in the vue instance have been initialized, and the properties have also been bound, but at this time it is still a virtual dom. The real dom has not been generated yet, and $el is not yet available. At this time, the data and methods of data and method can be called. The created hook function is the earliest that can call data and method, so the data is generally initialized here.
③ beforeMount (before mounting)
the template has been compiled at this time, but it has not been rendered to the page (that is, the virtual dom is loaded as a real dom), and el will be displayed if el exists. Here is the last chance to change the data before rendering, without triggering other hook functions, and you can generally get the initial data here.
When in the vue instance, el is the mount target, and el is not defined, then this.el displays undefined, but the mount target can also be identified if there is a template in the page, because the template can be regarded as a placeholder. If it is defined, it will display <div id="app">, so beforeMount cannot read the real el, and the real el can only be read after mounted, because el will only exist after the rendering is completed. The el mentioned here is the real el. Before the real el exists, what is in beforeMount is actually #app in the page, which is the target of the mount.
④ Mounted (after mounting)
At this point, the template has been rendered into a real DOM, and the user can already see the rendered page, and the data of the page is also displayed in data through two-way binding. The last life cycle function during the instance creation period, when mounted is executed, it means that the instance has been completely created. At this time, if there is no other operation, this instance will lie quietly in our memory. at every turn.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>这是vue的生命周期</h1>
        <p v-for="i in 5">你好 vue{
    
    {
    
    i}}</p>
    </div>
</body>
<!--vue对象一般写在body体下面-->
    <script>
        //这样写当前vue对象只能作用在当前的html上
        new Vue({
    
    
            //利用vue的属性设置  来对vue进行初始化设置
           beforeCreate(){
    
    
               //初始化之前的生命周期钩子
               console.log("我是初始化之前的生命周期函数，此时data，method都还没有加载:")
              /* debugger;
               this.myMethod();*/
           },
            //此时vue对象开始初始化  初始化就是读取写好的data和methods
            el:"#root",
            data:{
    
    
               myName:"大朗",
                myAge:"18",
                adminList:[]
            },
            methods:{
    
    
               myMethod(){
    
    
                   console.log("我是myMethod函数")
               }
            },
            //初始化完毕
            created(){
    
    
               console.log("初始化完毕，此时data和methods都已经被读取")
                //一般初始化时需要加载的数据 都可以在这里发起
                this.myMethod();
            },
            //vue读取模板（el容器），根据vue语法在vue内存中生成虚拟dom
            //在虚拟dom挂载到页面之前
            beforeMount(){
    
    
               console.log("这是挂载前生命周期钩子，此时只有虚拟dom，还没有挂载到浏览器")
                debugger;
            },
            //挂载结束
            mounted(){
    
    
               console.log("挂载结束  此时 虚拟dom已经渲染到指定容器位置")
            }

        });
    </script>
</html>

4.2) Four functions for updating and destroying

① beforeUpdate (before update)
before updating the state (before the data in the view layer changes, not before the data in the data changes), trigger before re-rendering, and then vue's virtual dom mechanism will rebuild the virtual dom and the last virtual dom tree utilization The diff algorithm is re-rendered after comparison. Only data changes on the view will trigger beforeUpdate and updated, and data changes that only belong to data cannot be triggered.
② The updated (updated)
data has been changed, and the dom has also been re-rendered (rendered).
③ beforeDestroy (before destruction)
Execute before destruction ($destroy method will be executed when it is called), generally here to deal with the aftermath: clear timers, clear non-instruction-bound events, etc...') ④ destroyed (after destruction
)
destroy After that (the Dom element exists, but it is no longer controlled by vue), unload the watcher, event listener, and subcomponents.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        姓名:{
    
    {
    
    myName}}<br/>
        年龄:{
    
    {
    
    myAge}}<br/>
        <button @click="changeAge()">年龄+1</button>
        <button @click="killVue()">销毁vue</button>
    </div>
</body>
<!--vue对象一般写在body体下面-->
    <script>
        //这样写当前vue对象只能作用在当前的html上
        new Vue({
    
    
            beforeCreate(){
    
    
                console.log("vue初始化之前，此时还没有data和methods")
            },
            el:"#root",//vue要把数据渲染到哪个html容器上
            data:{
    
    //vue的数据  只要符合键值对都行
                myName:"大朗",
                myAge:18
            },
            methods:{
    
    //vue提供的函数
                myMethod(){
    
    
                    console.log("这是函数")
                },
                changeAge(){
    
    

                   this.myAge=this.myAge+1;
                    console.log("有人调用了修改年龄的方法 此时年龄是：",this.myAge)
                },
                killVue(){
    
    
                    this.$destroy();
                }
            },
            created(){
    
    
                console.log("vue初始化之后，此时data和methods已经被读取")
            },
            beforeMount(){
    
    
                console.log("vue挂载前，此时只是生成了虚拟dom，还没有挂载到页面")
                debugger
            },
            mounted(){
    
    
                console.log("vue挂载完毕，此时虚拟dom已经挂载到页面")
            },
            //无论什么方式  改变了vue的数据或内容  vue会重新生成虚拟dom 重新渲染  并应用
            beforeUpdate(){
    
    
                console.log("修改前")
                //debugger
            },
            updated(){
    
    
                console.log("修改后")
            },
            //如果我们不再需要vue  我们可以销毁vue
            //vue对象只能被销毁
            //销毁前的挣扎  此时有些内容已经不再干活了
            beforeDestroy(){
    
    
                console.log("销毁前，我看看谁不再干活了")
                this.changeAge();//销毁前  再调用一次改变年龄的函数
                // debugger
            },
            created() {
    
    
                console.log("销毁后，vue彻底死亡")
            }

        });
    </script>
</html>