Vue框架-邂逅Vue.js-CSDN博客

本文链接：https://blog.csdn.net/ImmortalSYM/article/details/121524508

Vue框架-邂逅Vuejs

Vue基础
—Vue是一个渐进式的框架；通俗理解，渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验；或者你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及生态系统可以满足要求，比如Vue全家桶（Core+Vue-router+Vuex）;

—Vue的特点：
1. 解耦视图和数据；
2. 可复用组件；
3. 前端路由技术；
4. 状态管理；
5. 虚拟DOM；
—安装Vue.js

官方安装提供多种安装方式！！
1. 直接CDN引入：可以选择开发环境版本或者生产环境版本；
```

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
```
2. 下载安装
  
  开发环境：https://vuejs.org/js/vue.js
  
  生产环境：https://vuejs.org/js/vue.min.js
3. NPM安装

Vue基础语法

—拓展延伸：在ES6中，定义变量常常使用let，而定义常量使用的是const；之前js编程范式为命令式编程；

—语法：编程范式，声明式编程

<div id="app">
 <h1>{{message}}</h1>
 //展现列表
 <ul>
     <li v-for="item in list">{{item}}</li>
 </ul>
</div>

<script src="vue.js"></script>
<script>
 //创建Vue实例，传递参数为对象类型
	const app = new Vue({
     el:'#app',//挂载要管理的元素
     data:{//定义管理元素的数据
         message:'hello,Vue',
         list:['Tom','Jack','Ammy']
     }
 })
</script>
—代码可以做到响应式，当数据发生变化，页面内容也会发生变化；

—列表的展示：列表的展示要写入<ul>中，可以通过v-for指令实现列表元素的遍历；响应式代码，可以直接添加或者删除元素，例如app.list.push('Simon')

计数器小案例

<div id="app">
 //显示器
 <h2>当前计数：{{counter}}</h2>
 //按钮
 //添加监听事件
 <button v-on:click="counter++">+</button>
 <button v-on:click="counter--">-</button>
 //通过定义方法绑定监听事件，使用v-on的简写@(语法糖)
 <button @click="add">+</button>
 <button @click="sub">-</button>
</div>
<!--引入vuejs-->
<script src="vue.js"></script>
<script>
	const app = new Vue({
     el:'#app',//挂载要管理的元素
     data:{//定义管理元素的数据
         counter:0,
     },
     //定义方法
     methods:{
         add:function(){
             this.counter++;
         },
         sub:function(){
             this.counter--;
         }
     }
 })
</script>

MVVM（Model ViewModel View ）

—推荐：学习一个新的概念时，可以通过维基百科，https://zh.wikipedia.org/wiki/

—View层：视图层，用于给用户展示各种信息，即DOM层；例如上述计数器案例的View层是div中的内容；

—Model层：数据层，可能是固定数据，更多的是来自服务器或者从网络上请求下来的数据；例如上述计数器案例的Model层是实例app中data中的数据内容；

—ViewModel层：作为View和Model之间的桥梁，主要做两件事情：DOM Listeners即DOM监听和DOM Bindings即数据绑定，将Model的改变实时传递反映到View中；例如上述计数器案例的ViewModel层是创建的实例new Vue()；
Vue实例中的options
—在创建Vue实例的时候，通常会传入一个对象options，这个options对象可以包含很多选项，具体详细可以查看Vue官网！

—较为常用的结构选项：
1. el：决定Vue实例会管理哪一个DOM元素；参数类型为String或者HTMLElement；
2. data：Vue实例对应的数据对象；参数类型为Obejct或者Function；(在组件当中，data传递的参数必须为函数类型)
3. methods：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用；参数类型：{[key:String]:Function}；可以定义多个方法，多个之间使用逗号隔开；
4. 生命周期函数；
5. computed：计算属性，我们通过插值语法显示一些data中的数据，但是经常一些数据需要进行转化在显示或者多个数据需要结合起来进行显示，可以通过计算属性，传递函数操作数据进行显示；
插值语法

将需要的数据内容绑定在标签文本内容中进行显示；将值插入到我们模板内容中；

Mustache语法

—语法：{{}}

—mustache语法中不仅仅可以直接写变量，还可以写简单的表达式；例如：{{fitstName + ' ' + lastName}}

v-once指令：写入该指令，不会随着赋值数据的改变而改变，只能被赋值一次；

v-html指令：某些情况下，从服务器请求的数据本身是一个HTML代码，可以通过该指令解析HTML格式，显示对应内容；语法：<h2 v-html = "HTML文本字符串"></h2>

v-text指令：作用和{{}}相同，用于将文本数据显示在页面中，但是在开发中不常用，因为灵活性较差；

v-pre指令：用于显示原本的内容，不显示{{}}解析之后的内容；

v-cloak指令：在vue解析之前，会存在一个v-cloak属性，在vue解析之后，这个属性就删除了；可以解决某些情况下，浏览器直接显示出未编译的Mustache标签；

v-bind介绍

除了内容需要动态决定外，我们也可以动态绑定某些属性；比如：动态绑定a元素的href属性，动态绑定img元素的src属性；

—作用：v-bind用于动态绑定一个或者多个属性，或者向另外一个组件传递props值；

—缩写语法(语法糖)：: ，例如：<imag :src="imagURL" alt="">

—基本使用：

<div>
 //为属性动态绑定
	<imag v-bind:src="imgURL" alt="">
  <a v-bind:href="aHref"></a>
</div>
<!--引入vuejs-->
<script src="vue.js"></script>
<script>
	const app = new Vue({
     el:"#app",
     data:{
         imgURL:'',
         aHref:''
     }
 })
</script>

动态绑定class属性

—绑定方式

对象语法：<h2 :class="{key1:value,key2:value2...}">

<div id="app">
    <!--绑定class属性-->
	<h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
    <!--绑定点击函数-->
    <button v-on:click="btnClick">按钮</button>
    <!--methods方法形式绑定属性-->
    <h1 v-bind:class="getClass()">{{message}}</h1>
</div>
<script src="vue.js"></script>
<script>
	const app = new Vue({
        el:"#app",
        data:{
            message:'hello',
            isActive:true,
            isLine:true
        }
        methods:{
           //点击按钮，属性取反
        	btnClick:function(){
        		this.isActive = !this.isActive
        	//可以通过methods方法形式进行class属性动态绑定
            getClass:function(){
                return {active:this.isActive,line:this.isLine}
            }
    	}
    }
    })
</script>

数组语法：<h2 class="title" :class="[active,line]">{{message}}</h2>，开发中不常用；

动态绑定style内联样式

—绑定方式：

对象语法：<h2 :style="{属性名1:value,属性名2:value,...}"></h2>

<div id = "app">
    <!--动态绑定CSS内联样式-->
    <!--注意：这里属性值如果直接传入，需要加单引号，否则会当成一个变量解析报错-->
    <h2 :style="{fontSize:'50px'}">{{message}}</h2>
    <!--size当成一个变量使用-->
    <h2 :style="{fontSize:size}">{{message}}</h2>
    <h2 :style="{fontSize:finalSize + 'px',backgroundColor:finalColor}">{{message}}</h2>
    <!--数组绑定语法-->
    <h2 :style="[style1,style2]">{{message}}</h2>
</div>
<script sssrc="vue.js"></script>
<script>
	const app = new Vue({
        el:"#app",
        data:{
            message:'hello',
            size：'100px'
            finalSize:50
            finalColor:'red'
            //数组语法
            style1:{backgroudColor:'red'},
            style2:{fontSize:'100px'}
        }
    })
</script>

数组语法：<h2 :style="[style1,style2,...]">{{message}}</h2>，开发中不常用；

Vue生命周期

—生命周期是一个事物从诞生到消亡的过程；

—当Vue创建过程中，会实现很多个生命周期函数（回调函数）；

—常用的生命周期函数：created()、mounted()

—callHook：回调钩子函数；

—可以查看官方提供的生命周期函数；

—在Vue实例中的option中可以传递生命周期函数；