vue基础笔记（p1-19）

看的是这个教程->这个

非常非常简略

目录

看的是这个教程->这个

vue插件

vue基础

插值

模板语法

class和style的绑定：

条件渲染v-if，v-show

列表渲染v-for

事件监听v-on

表单输入双向绑定v-model

组件

视频教程

最基础的使用案例：

MVVM

模板语法

双大括号表达式

指令1：强制数据绑定

指令2：绑定事件监听

计算属性和监视

计算属性

监视属性

计算属性高级

class和style绑定

条件渲染

列表渲染

使用v-model进行自动表单收集

Vue生命周期

过渡和动画

过滤器

日期

指令

内置指令

自定义指令

插件

生命周期钩子

JS中数组常用方法

vue的变异方法

---

 

vue插件

 

vue基础

官网视频教程地址：https://learning.dcloud.io/#/?vid=1

官网的教程非常详细，可以直接通过文档进行学习。

我们使用vue都需要新建一个vue的对象，并且在参数部分声明一个匿名对象，对象中需要有基础的el和data。

一般情况下我们都声明vm变量来承接这个对象

 

vue完全支持javascript的表达式，例如：

 

插值

使用{{}}进行插值

模板语法

指令 (Directives) 是带有 v-前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式(v-for是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：

 

修饰符：

修饰符 (modifier) 是以半角句号 .指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

如下例子：如果不添加.stop修饰那么会执行click1和click2，但是如果添加之后就表示只执行click2之后就直接停止。

 

class和style的绑定：

使用v-bind进行绑定。绑定之后可以进行动态的style操作，同样支持多样式绑定，之间使用逗号隔开，数组形式代替大括号同样可行。

 

绑定内联样式同样可以，这里使用了缩写：，三元运算符

 

条件渲染v-if，v-show

两者大致相同。v-show始终渲染并且保留到DOM中，但是v-if条件不满足不渲染。

 

只有在为true时才会执行。

 

列表渲染v-for

语法为：v-for=“item in items”。items表示数据数组，item表示被迭代的数据元素的别名。如下两个例子

我们使用index来获取索引，使用key来获取属性名

     

事件监听v-on

v-on可以绑定当前html元素的所有事件。

简单逻辑的例子，逻辑直接卸载button中

 

复杂逻辑的例子，我们把方法写到methods

  

同样可以传递参数，不要以为在“”中就觉得有什么不同其实写法是一样的。同样是实参和形参

  

表单输入双向绑定v-model

双向绑定，既可以作为输入绑定，也可以作为输出绑定

 

组件

可以重复利用的vue实例，和new vue使用相同的选项。

需要有一个根节点，如果根节点有兄弟节点那么无法正常显示。

第一个参数是组件名称，也是上面组件使用的名称，第二个是回调函数。

这种方式为全局注册。

 

局部注册：

  

单文件组件

   

启动图形化vue项目管理器

    

视频教程

 

数据绑定：数据可以自动的从内存到页面中

 

最基础的使用案例：

 

MVVM

model：模型，数据对象（data）

view：视图，模板页面

viewModel：视图模型（本质上就是vue的实例，也就是vm）

模板语法

模板包含了一些js语法，表达式，指令

双大括号表达式

语法：{{exp}}或者{{{exp}}}

功能：向页面输出数据，可以调用对象的方法

指令1：强制数据绑定

语法：详细：v-bind：xxx=‘yyy’        简略：：xxx=‘yyy’    这里的yyy会作为表达式解析执行

功能：指定变化的属性值

指令2：绑定事件监听

语法：详细：v-on：click=‘xxx’          简略：@click=‘xxx’

功能：绑定指定事件名的回调函数

计算属性和监视

计算属性

在computed属性对象中定义计算属性的犯法

在页面中使用{{方法名}}来显示计算结果

监视属性

通过vm对象的$watch（）或者watch配置来监视指定的属性

当属性变化时，回调函数自动调用，在函数内部计算。

计算属性高级

通过getter/setter事项对属性数据的显示和监视

计算属性存在缓存，多次读取只执行一次getter计算

class和style绑定

class绑定：     v-bind：class='XXX'   ,可以是数组，对象，字符串

style绑定：     v-bind：style="{ color:activeColor , fontSize:fontSize + 'px'  }"

activeColor/fontSize是data属性

条件渲染

v-if

v-else

v-show：频繁切换使用这个会比较好

列表渲染

列表显示：

数组：v-for、index

对象：v-for、key

列表的更新显示

删除item

替换item

使用v-model进行自动表单收集

最终使用value中的值进行收集数据

    

Vue生命周期

如果是匿名函数就使用箭头函数

挂载：

 

死亡之前：

 

销毁：

 

过渡和动画

   

最终是要自己制定样式

  

过滤器

 

日期

对日期进行格式化使用mement.js的外部库

<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>

 

更新：

  

指令

内置指令

  

ref的使用方法，作为标示

 

通过$refs获取到叫做content的标签内容，

 

为了防止网页加载过慢出现{{msg}}，我们可以使用v-cloak，然后在style中设置上图所示的内容，防止未加载完成页面出现{{msg}}

自定义指令

针对所有Vue的就是全局，针对某个Vue就是局部

    

插件

我们需要 新建一个js文件

     

插件库需要在原来库的下面：

  

 

 

 

 

 

 

 

 

生命周期钩子

  

JS中数组常用方法

https://www.cnblogs.com/my466879168/p/12337760.html

  

vue的变异方法

对js的数组方法重写，同时也能更新界面。