vue框架的学习-基础部分

1:vue的安装

使用一个框架，我们第一步要做什么呢？安装下载它

安装Vue的方式有很多：
方式一：直接CDN引入
你可以选择引入开发环境版本还是生产环境版本

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载和引入
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js
方式三：NPM安装
通过webpack和CLI的安装使用

我的公司开发时使用webpack安装了vue即方式三
注：本文是本人vue学习笔记,本文多数内容属于Vue2.6之前的内容，只有较为重要的地方才会补充2.6版本之后的内容，望周知。

2:Vue中的MVVM

个人理解:
v-view就是页面
m-model就是数据
vm-viewModel是Vue
DOM Listeners就像计数那个例子一样,事件发生了他会监听到反应到页面上
Data Bindings 数据绑定,就是data里的数据,不用像js一样一大堆代码反应到页面上

视频中的讲解
View层：
视图层
在我们前端开发中，通常就是DOM层。
主要的作用是给用户展示各种信息。
Model层：
数据层
数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
VueModel层：
视图模型层
视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

3:Vue的生命周期

根据生命周期实际中用到的应该是那些方法吧
上图方法
created()创建时执行(比如组件创建出来)
mounted() template挂载到dom上时执行
updated()发生刷新时执行

4:基础语法(插值语法)

mustache语法(双括号语法)

<h2>{
   {
   first + last}}</h2>
<h2>{
   {
   first + '' + last}}</h2>
<h2>{
   {
   first}} {
   {
   last}}</h2>和上面的结果一样的
<h2>{
   {
   count * 2}}</h2>

v-once指令
在我们不希望一个元素随界面随意的改变而改变时可以使用这个
该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。

<h2 v-once>{
   {
   message}}</h2>
不会变,只会保持最开始的值

v-html指令
某些情况下，我们从服务器请求到的数据本身就是一个HTML代码
如果我们直接通过{ {}}来输出，会将HTML代码也一起输出。
但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。
如果我们希望解析出HTML展示,可以使用v-html指令,该指令后面往往会跟上一个string类型,会将string的html解析出来并且进行渲染

<h2 v-html="url"></h2>
后端传过来的是一个<a href/>的html语言字符串url,可以让vue自动解析

v-text指令

<h2 v-text="message"></h2>与<h2>{
   {
   message}}</h2>相同
但它不够灵活。建议使用mastache语法

v-pre指令

<h2 v-pre>{
   {
   message}}</h2>显示出来的就是{
   {
   message}}

v-cloak指令

<div id="app" v-cloak>{
   {
   message}}</div>
当vue还没初始化完成时先显示v-cloak的样式,初始化好vue自己就删了这个
属性,防止网络卡时没加载完vue显示{
   {
   message}}

v-bind指令
可以动态绑定a元素的href属性
可以动态绑定img元素的src属性

<img v-bind:src="imgUrl">
后端传回来的图片地址放在imgUrl中通过v-bind反应到页面上
语法糖写法:<img :src="imgUrl">

v-bind绑定class

<!--如果嫌太长可以把这个写到下面的方法里-->true还是false保留不保留class
<!--<h2 :class="{active: isActive, line: isLine}">{
   {
   message}}</h2>-->
<h2 :class="getClass()">{
   {
   message}}</h2>
:class="{
   isActive: index === currentIndex}

v-bind绑定style(对象语法)<h2 :style="{key(属性) :value(属性值)}"></h2>//value要加单引号,防止被vue解析成变量
<h2 :style="{fontSize :'50px'}">{
   {
   message}}</h2>支持驼峰也支持原来的

用法一：直接通过{
   }绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>
用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes"