2019-07-08

<div id="app">
<span>{{messaeg}}</span>
</div>
<script src="vue的地址"></script>
<script>
var vm = new({
el:'#app',
data:{
message:"呵呵",

}

})

</script>

v-text和差值表达式的区别：“v-text”会覆盖标签里的内容，v-text默认不会出现顿闪,{{}}差值表达式要v-clock [v-clock]{
dispaly:none
}

v-html 解析data里的标签<div>呵呵</div>

input的title属性:鼠标放上去展示的文字消息
value:值
type:类型

绑定属性:v-bind

image.png

v-bind会中可以写合法的js表达式子

image.png

简写的形式：一个:冒号

v-on事件的指令
简写@
methods:{
//中间写方法

}

image.png

跑马灯效果
1，基本结构

image.png

2，绑定事件
3，截取字符串
4，开启定时器
5，赋值

image.png

箭头函数this指向外部的this

image.png

事件修饰符

image.png

vue会监听data中的数据，数据只要一更新就会渲染
默认冒泡
事件冒泡机制
父盒子包裹子盒子，同时注册点击事件，先触发子盒子再父盒子的

image.png

阻止冒泡修饰符.stop
给子盒子添加事件修饰符阻止向外冒泡，就是只触发子盒子的事件

image.png

阻止默认行为
比如a标签的默认行为就是跳转href
prevent修饰符就阻止了默认行为

捕获机制从外到里
给父盒子添加修饰符capture 先执行父盒子再执行子盒子的事件
和冒泡相反

.self修饰符，只当事件在自身上点击时触发
冒泡是被动触发，从内到外，给父盒子添加.self修饰符只在自身上点击触发，冒泡或者捕获不应触发

once修饰符只触发一次
[图片上传中...(image.png-777cca-1562595465280-0)]
第一次阻止了，第二次没阻止，所以只阻止一次

.stop和.self的区别
.stop 阻止所有的元素
.self只是self自己的那个元素，其他元素的不阻止

有一点点点像break和return

v-model双向数据绑定
表单独有的
input select textarea

简易的计算器

image.png

简单的eval()解析

image.png

：class

image.png

vue中的样式
1, 先定义3个style样式

image.png

一个激活的样式

image.png

letter-spacing:中文间隔
word-spaning:英文间隔
数组中使用三元表达式

image.png

对象的形式

image.png

直接使用对象

绑定内联style
[图片上传中...(image.png-3f7312-1562598047133-0)]
如果属性包含- 添加引号

image.png

v-for 循环迭代遍历
[图片上传失败...(image-8d6d58-1562598680479)]

键，值，索引
v-for迭代数字

image.png

数组中追加

image.png

[图片上传中...(image.png-c82646-1562599514882-0)]
key用字符串或者number

image.png

总结：

image.png

http://www.liulongbin.top:3005

2,搜索

image.png

直接return

image.png

过滤器

image.png

过滤器的简单使用

image.png

正则替换

image.png

过滤器传参

image.png

过滤器传多个参数

image.png

过滤器的多次调用

image.png

从左往右依次处理

image.png

全局时间过滤器

image.png

年月日时分秒过滤器

image.png

形参的模拟值es6

image.png

私有的过滤器

image.png

名称一致优先调用私有的过滤器

image.png

字符串填充

image.png

按键修饰符

image.png

按键修饰符的键盘码值

image.png

自定义全局按键修饰符

image.png

自定义指令

image.png

全局组件

https://blog.csdn.net/qq_40141204/article/details/82980116
https://blog.csdn.net/runOnWay/article/details/78998631

css样式相关的可以写在bind中

image.png

钩子函数参数

image.png

私有指令

image.png

简写形式

image.png

vue实例的生命周期

image.png

vue-resource

image.png

node.js服务器

image.png

客户端写方法

image.png

品牌的数据列表

image.png

vue-resource

https://www.npmjs.com/package/vue-resource
https://github.com/pagekit/vue-resource/blob/HEAD/docs/config.md

image.png

vue的动画

image.png

进入和离开的动画

image.png

自定义的动画样式名字

image.png

进场动画和立场的动画

image.png

放到元素的身上

image.png

【props】

image.png

入场的动画和立场的动画

image.png

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

动画css
[https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90](https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90)


<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
</transition>

进入前和进入后

image.png

入场效果一进场就有动画

image.png

tag属性指定元素标签

image.png

vue的组件化

### [Vue.extend( options )](https://cn.vuejs.org/v2/api/#Vue-extend "Vue.extend( options )")

*   **参数**：

    *   `{Object} options`
*   **用法**：

    使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

    `data` 选项是特例，需要注意 - 在 `Vue.extend()` 中它必须是函数

    ```
    <div id="mount-point"></div>
    ```

    ```
    // 创建构造器
    var Profile = Vue.extend({
      template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
      data: function () {
        return {
          firstName: 'Walter',
          lastName: 'White',
          alias: 'Heisenberg'
        }
      }
    })
    // 创建 Profile 实例，并挂载到一个元素上。
    new Profile().$mount('#mount-point')
    ```

    结果如下：

    ```
    <p>Walter White aka Heisenberg</p>
    ```

组件注册

image.png

官网

https://cn.vuejs.org/v2/guide/components-registration.html

第三种方法

image.png

私有组件

image.png

组件中的data必须是一个函数,并且return出来一个

image.png

为什么要加return的

image.png

通过return创建一个新的对象,不共享

image.png

组件的切换

image.png

组件切换的第二种方式

image.png

父子组件的传值方式

image.png

父组件到子组件传递方法

image.png

子组件$emit触发父组件传递的自定义方法

image.png

子组件, 向父组件传参,传值

image.png

发表评论

image.png

this.$ref获取元素

image.png

修改路由高亮的类名

image.png

路由的标签添加一个动画

image.png

路由this.$route对象

image.png

查询字符串传参

image.png

路由解析

image.png

命名视图

image.png

侦听器

image.png

监听路由的改变

image.png

计算属性

image.png

nrm的使用

image.png

搭建项目工程，搭建文件结构

image.png

npm init -y初始化

webpack的安装和使用

1,npm i webpack -g全局安装
2,npm i webpack -S安装到项目依赖

image.png

安装3.6.0的版本不安装4.0的

npm install webpack@3.6.0 -g 全局安装
npm install webpack@3.6.0 -S
如果安装了4.0直接卸载
npm uninstall webpack -g 全局安装
npm uninstall webpack -S

安装npm i webpack-dev-server -D
报错就安装低版本的,版本兼容导致的错误
npm i -D webpack-dev-server@2.9.3

image.png

配置热更新
https://www.jianshu.com/p/fc2df1ceb8e7

image.png

页面保存到内存

安装插件

cnpm i html-webpack-plugin -D

const path = require('path');
// 3.6版本热更新的第一步
const webpack = require('webpack')
//   "dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot",
// 导入在内存生成html页面的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// npm init -y
// npm i webpack-dev-server -D
module.exports = {
    // 3.6版本的写法
    // 入口
    entry: path.join(__dirname, './src/main.js'), //打包文件的入口,要打包哪些文件
    // 出口
    output: {
        path: path.join(__dirname, './dist'), //打包后的文件输出路径
        filename: "bundle.js" //输出文件的名称
    },
    //开发服务配置
    devServer: {
        proxy: { // proxy URLs to backend development server
            //   '/api': 'http://localhost:3000'
        }, //代理
        open: true, //自动打开浏览器
        port: 3000, //设置端口
        contentBase: path.join(__dirname, 'src'), // boolean | string | array, static file location 打开的根路径
        // 3.6版本热更新的第二步
        hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin  热更新
        compress: true, // enable gzip compression  开启gzip压缩
        historyApiFallback: true, // true for index.html upon 404, object for multiple paths  
        https: false, // true for self-signed, object for cert authority
        noInfo: true, // only errors & warns on hot reload
        // ...
    },
    //   插件的配置
    plugins: [
        //  3.6版本热更新的第三步
        // 配置热更新的节点
        new webpack.HotModuleReplacementPlugin(), //new一个热更新的模块对象
        // 插件
        new HtmlWebpackPlugin({
            title: 'Hello World app', //html文件的标题
            // minify 的作用是对 html 文件进行压缩
            minify: { // 压缩HTML文件
                //是否对大小写敏感，默认false
                caseSensitive: true,
                //是否简写boolean格式的属性如：disabled="disabled" 简写为disabled  默认false
                collapseBooleanAttributes: true,

                //是否去除空格 删除空白符与换行符，默认false
                collapseWhitespace: true,

                //是否压缩html里的css（使用clean-css进行的压缩） 默认值false；
                minifyCSS: true,

                //是否压缩html里的js（使用uglify-js进行的压缩）
                minifyJS:true,

                //Prevents the escaping of the values of attributes
                preventAttributesEscaping: true,

                //是否移除属性的引号 默认false
                removeAttributeQuotes: true,

                //是否移除html注释 默认false
                removeComments: true,

                //从脚本和样式删除的注释 默认false
                removeCommentsFromCDATA: true,

                //是否删除空属性，默认false
                removeEmptyAttributes: true,

                //  若开启此项，生成的html中没有 body 和 head，html也未闭合
                removeOptionalTags: false,

                //删除多余的属性
                removeRedundantAttributes: true,

                //删除script的类型属性，在h5下面script的type默认值：text/javascript 默认值false
                removeScriptTypeAttributes: true,

                //删除style的类型属性， type="text/css" 同上
                removeStyleLinkTypeAttributes: true,

                //使用短的文档类型，默认false
                useShortDoctype: true, // 压缩内联css
            },
            template: path.join(__dirname, './src/index.html'), //指定模板,放入内存中,模板的路径
            filename: 'index.html', //输出的文件名，
            inject: true, //默认script标签放在body底部  body与true相同 head放在head标签内   false:不插入生成的js文件 只是单纯的生成一个html文件
            favicon: '', //给html文件生成一个favicon 属性值为 favicon 文件所在的路径名
            hash: true,//避免缓存添加hash的值 <script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>
            cache:true,//默认是true的，表示内容变化的时候生成一个新的文件。
            showErrors:true,//这个我们自运行项目的时候经常会用到，showErrors 的作用是，如果 webpack 编译出现错误，webpack会将错误信息包裹在一个 pre 标签内，属性的默认值为 true ，也就是显示错误信息。
            // 开启这个，方便定位错误
            // chunks: ['main','index'],//chunks主要用于多入口文件，当你有多个入口文件，那就回编译后生成多个打包后的文件，那么chunks 就能选择你要使用那些js文件 <script type=text/javascript src="index.js"></script>
            // <script type=text/javascript src="main.js"></script>
            excludeChunks: ['devor.js'],//排除掉一些js
            xhtml:false //如果为 true ,则以兼容 xhtml 的模式引用文件。

        })

    ]

    // 4.0版本的写法
    // mode: 'production',
    // mode: 'development',
    // 简写的
    // entry: {
    //     main:'./src/main.js',
    //     he:'./src/hee.js'
    // },
    // entry: {
    //     index: path.resolve(__dirname, './src/index.js'),
    //     devor: path.resolve(__dirname, './src/devor.js'),
    //     main: path.resolve(__dirname, './src/main.js')
    // },
    // output: {
    //     path: path.resolve(__dirname, 'dist'),
    //     filename: '[name].js'
    // },
    // module: {
    //     rules: [{
    //         test: /\.txt$/,
    //         use: 'raw-loader'
    //     }]
    // },
    // rules: [{
    //     test: /\.css$/,
    //     use: [{
    //             loader: 'style-loader'
    //         },
    //         {
    //             loader: 'css-loader',
    //             options: {
    //                 modules: true
    //             }
    //         }
    //     ]
    // }],
    // plugins: [
    //     new HtmlWebpackPlugin({
    //         template: './src/index.html'
    //     })
    // ]
};