vue的基础语法

复习基础语法

vscode

vscode的调试，按f5就会出现用什么样的方式进行调试。

进行一个选择

扩展软件：debugger chrome

使用：需要一个服务器的插件。http-server .

f5的时候，需要修改地址。地址是在服务器下边才可以的。

调试页面

vscode使用chrome调试普通的html页面的方法如下：

1，扩展软件的安装：debugger of chrome

2,当前项目下安装http-server

3，在http-server 安装后，在node_modules/http-server/bin，在vscode终端，运行http-server path（指的是把某个目录当成服务器目录），会有一个8080端口的服务器，运行后也是可以访问的。

4，f5 进行调试，选择chrome 的方式。选择html页面，在html页面引入的js文件，会自动跳转到被打断点的js文件里边。

注意：

如果没有安装debugger chrome 则会跳出如下的提示，是否需要安装调试的工具。其中就有chrome的提示。

vscode中管理git

vscode克隆github内容到本地

远程连接的地址是，点击克隆的时候会让我输入一个git的地址。

下异步操作：

克隆成功后，右下角会有提示，是否选择新窗口打开还是当前的窗口。

成功后的截图如下：

内容有变化的时候：

提交内容：

点勾，表示是否需要提交，选择时，输入提交内容，回车就提交了。

提交只是保存到本地仓库而已。这时选择推送，就是保存到了github上。

vscode需要设置Email和name

这个是设置email的方法。

vue扩展插件：

render函数

render()函数是把渲template的模板进行相关的处理后渲染成虚拟dom。

计算属性和监听器

computed 计算属性 与方法的区别：计算属性只要当值发生变化的时候才会重新渲染。计算属性是有缓存的效果的。也就是说，在值发生改变的时候它的值是缓存起来的。

缓存的有什么样的作用？

监听器：watch

监听器默认情况下是不会立即执行的，初始化的时候是不会立即执行的。需要设置一个数才会立即执行。

这个监听器的设置是初始化时也会执行，执行的代码是如下。注意：handler是固定写法，并不是被监听的属性。

如下代码：

上边的写法虽然是固定的，但是还是无法描述这个段代码更具体的意思。

data是被监听的数据。一旦data数据中发生改变，那么就会执行handler这个函数。

另外一个实例和结果：

<template>
    <div>
        旧的的数据{{wData}} <br>
        监听的数据:{{newData}}
    </div>
</template>
<script>
export default{
    data(){

        return {
            wData:{name:"laohu",age:30},
            newData:{newName:""}
        }

    },
    watch:{
        //这个是被监听的数据
        wData:{
            immediate:true,
            deep:true,
            handler(newObje,oldObje){
                this.newData.name=this.wData.name+"你最帅";
            }
        }
    }

}
</script>

结果：

如何挂载?

挂载有两种方式，一种el，一种是实例挂载。

之后会详细说明这两种挂载的区别。

结果：

通过浏览器测试发现没有id为app的div。

如下，只会覆盖掉，el所指的区域：

如下是结果：

new Vue() 和 组件定义的顺序

然后才是后边的这个内容：

v-for

如果页面中有两个v-for，如果都是设置:key="index",那么可能页面会报警告。如下：

我这个案例是两个数据，所以一个是0和1. 一个是用的1,2,34,数组的值为key,所以存在重复1，会报如下错。

计算属性 和 侦听器

计算属性：

如果在页面中使用计算语句，是不建议的。计算语句最好是写在计算属性里边。

watch的高级使用：

computed 和 watch之间的关系：

computed 是多个值发生改变可以影响一个值。有缓存性。

watch 是一个值发生改变了，可以做很多的其他的操作。

生命周期

created 和 mounted 的区别：

created是vue组件已经创建了，但是还没有挂载。也就是虚拟的dom是存在的，没有真是的dom。

mounted是实例已经挂载到了页面上。el也已经创建好了。

sync的使用

update:show=xxxx

子组件对父组件提交时需要使用的。

sync是简化了，子组件使用this.$emit后父组件自定义组件的这个操作。

例如：

子组件的代码：

更详细的说明：

进行了进一步的测试，子组件提交的事件名称update:show 对应的是父组件的:show.sync,并且子组件提交的值会赋值给父组件的show，这里的show只是父组件的一个变量。

如下代码：

父组件代码：

    <div>
        person|{{changeValue}}
        <hr>
        <child :change.sync="changeValue"></child>
    </div>

子组件代码：

        change(){
            this.$emit("update:change","change my father");
        }

组件的探讨

使用组件有什么样的好处：复用性、可维护性、可测试性。

一般用于在什么样的业务。

业务分成3种：

通用组件：按钮组件，布局组件

业务组件：登陆组件，轮播图组件****

页面组件：例如页面之间需要经常切换的 列表页，详情页。

数据响应式不更新（Vue.set和this.$set）

简单说一下原理：一开始在data函数里边没有声明过的属性，后期增加是不会有响应式的。需要使用set或者$set处理后才可以。

这个是数据。如果我们在这个对象添加一个age属性，并且赋值。响应式是不会更新的。

在点击之后循环这个数组，数据里边的对象都添加一个属性。

但是数据是不更新的。

我们需要用Vue.set 或者是this.$set 给对象添加属性：

Vue.set 和 this.$set 是一样的作用。

Vue.delete 和 this.$delete

删除属性也是一样的。

需要使用上述的方法才会有响应式的效果。

这样是不行的：

这样才可以：

事件总线和监听事件

vm.$on 和 vm.$emit

vm是vue的实例。

总线模式是：让Vue的原型上增加一个vue的实例。所有的监听和提交事件都可以绑定在这个vue实例上。

本身它就是vue实例的方法。只是我们用了一个公用的vue来绑定方法而已。

监听一次事件和移除事件

$once(); 监听这个事件，只会执行一次

$off() //移除所有的事件名称

$off("事件名") 这个事件名所有的方法

$off("事件名",callback) //移除某个事件名下的某个方法

ref 和 $refs

ref和 refs 是配套使用的。

ref 返回的是当前的dom的节点，如果是自定义组件，返回自定义组件实例。如果是v-for循环，返回一个数组。

ref至少在mounted中才会有，是渲染后才会创建。

ref不能够双向绑定。

使用：this.$refs.xxx的某个操作。

记住2点：

第一点：获取的是dom节点。组件返回组件实例。for循环，数组节点或实例。

第二点:mounted后才会产生。

基础实例：

获取是

v-for的实例：

获取的方法是

会获取到如下4个dom的元素：

vue动画

这个动画效果的css样式必须是以结果代码中transition配合使用的：

结构代码：

在结构代码中切记不要把name="fade" 这个丢了，否则的话，不会有任何效果。

进一步理解name的值，其实name的值是可以变化的。只局限于样式值的第一个单词。如下代码也是同样的效果，但是name值和样式类都发生改变了：

先把要动画的盒子所对应的transition标签的name属性改变时。然后样式根据这个做相应的调整，如下代码所示，效果是一样的。

vue与animate.css动画结合

这个是需要给某一个模块增加动画需要增加的属性。

前提当然也是要引入animate.css这个库。

这里是以进入 和 退出的动画为例，进行一些相关的说明。

js动画钩子

任务是 velocity.js的使用。

还有一个是其他比较常用的js的一个使用。

js的钩子有以下几种：

我觉得这个并不是很重要，所以还是算了吧，如果是效果直接用css做比较好一点。

列表动画

就是在新增列表项目的时候，动画的实现。

具体看文档吧。

过滤器

过滤器有两种形式，一种是{{}}的方式。一种是v-bind的方式。

过滤器的定义方式也有两种，一种是全局的，一种是局部的。

过滤器的定义：

过滤器的使用：

局部定义：

自定义指令

简单的实例

使用：

实例：

自定义组件根据用户的角色不同，而是显示按钮。

使用如下：

注意的是：如果user不加单引号则是一个变量，只有加了单引号才是一个字符串。

渲染函数

render函数实现组件渲染

render函数返回的是一个虚拟dom。我们叫做VNode。

render其实是指组件的渲染。

在组件里边除了用模板以外，还可以用render函数来实现组件渲染。

实例如下：

使用如下：

注意：

1,h（）的第三个参数是一个数组。[子元素，子元素....]

但是我们上述实例中并没有写数组，是因为this.$slots.default本身就是数组。并且也只有这一个元素。

如果有多个元素是一定要写数组的。

2,在h()进行渲染的标签中会有自动生成的标签和插入的标签，所以需要辨别。

在接下来复杂的案例中会看到。

全部代码：

使用上述如下：

另外的知识点：

在渲染函数中设置class的值，如下两个截图：

显示结果：

icon中svg的使用如下：

使用script的方式获取到的js文件，实际上在dom结构的显示是：

在浏览器看到的dom结构如下：

如果使用上述图标，就要用到<svg class="icon"><use xlink:href="#icon-car"></use></svg>

可以通过类icon来调整大小。

函数式组件

函数式组件仔细的可以看文档。

混入

混入的合并，是可以到官网上详细查看的。

组件内部的优先级会大于mixin的。

插件

如果要定义一个插件，就是定义一个对象，然后在对象里边实现install的方法。

当我们引入Vue的时候，实际山我们把Vue的值绑定到了window上的。

输出的结果是：

我们插件如下：

注册后，引入和使用如下：

vue-cli

vue add router 添加路由插件

静态资源：

转换规则：

url绝对刘静，也就是 public 下的文件是 可以被当做静态文件访问的。

相对路径： . 开头的路径，会被webpack打包成相对能够访问的路径。可能会修改静态文件的名字等。

~ 开头 是请求模块被解析，你甚至可以到 node_modules中请求模块

@开头是请求模块解析。vuecli默认设置@指向的是src。src是@的别名。

开发环境和线上环境

如果我的应用没有部署到域名的根部，那么就需要做如下的操作：

例如我的应用是在cart的这个目录下边的。如下图：

因为现在的vue-cli中是没有vue.config.js的，所以需要自己主动增加一个。

我们可以主动设置一个域名访问的前缀：

如下代码：

重启服务器

如下图：

index.html文件中的BASE_URL

BASE_URL默认是 我们在vue.config.js中设置的publicPath的地址。如果不做任何设置就是当前项目的public目录下的访问静态文件index的目录。

浏览器默认地址，也就是上述我们设置的域名根路径

通过如下的代码：

输出的结果是：

全局使用scss的变量

下边的scss文件定义和文件的内容：

内容：

安装插件：

style-resources-loader

安装好之后在vue.config.js中进行配置。

在配置里边先定义一个函数：

然后配置webpack:

这样就可以全局使用scss的变量了。