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和差值表達式的區(qū)別：“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會監(jiān)聽data中的數據瞬矩，數據只要一更新就會渲染
默認冒泡
事件冒泡機制
父盒子包裹子盒子徒欣，同時注冊點擊事件，先觸發(fā)子盒子再父盒子的

image.png

阻止冒泡修飾符.stop
給子盒子添加事件修飾符阻止向外冒泡捅暴，就是只觸發(fā)子盒子的事件

image.png

阻止默認行為
比如a標簽的默認行為就是跳轉href
prevent修飾符就阻止了默認行為

捕獲機制從外到里
給父盒子添加修飾符capture 先執(zhí)行父盒子再執(zhí)行子盒子的事件
和冒泡相反

.self修飾符恬砂，只當事件在自身上點擊時觸發(fā)
冒泡是被動觸發(fā)，從內到外蓬痒，給父盒子添加.self修飾符只在自身上點擊觸發(fā)泻骤，冒泡或者捕獲不應觸發(fā)

once修飾符只觸發(fā)一次
[圖片上傳中...(image.png-777cca-1562595465280-0)]
第一次阻止了，第二次沒阻止梧奢，所以只阻止一次

.stop和.self的區(qū)別
.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 循環(huán)迭代遍歷
[圖片上傳失敗...(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

名稱一致優(yōu)先調用私有的過濾器

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  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 構造器趋惨，創(chuàng)建一個“子類”。參數是一個包含組件選項的對象惦蚊。

    `data` 選項是特例器虾，需要注意 - 在 `Vue.extend()` 中它必須是函數

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

    ```
    // 創(chuàng)建構造器
    var Profile = Vue.extend({
      template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
      data: function () {
        return {
          firstName: 'Walter',
          lastName: 'White',
          alias: 'Heisenberg'
        }
      }
    })
    // 創(chuàng)建 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創(chuàng)建一個新的對象,不共享

image.png

組件的切換

image.png

組件切換的第二種方式

image.png

父子組件的傳值方式

image.png

父組件到子組件傳遞方法

image.png

子組件$emit觸發(fā)父組件傳遞的自定義方法

image.png

子組件, 向父組件傳參,傳值

image.png

發(fā)表評論

image.png

this.$ref獲取元素

image.png

修改路由高亮的類名

image.png

路由的標簽添加一個動畫

image.png

路由this.$route對象

image.png

查詢字符串傳參

image.png

路由解析

image.png

命名視圖

image.png

偵聽器

image.png

監(jiān)聽路由的改變

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

配置熱更新
http://www.reibang.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" //輸出文件的名稱
    },
    //開發(fā)服務配置
    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版本熱更新的第三步
        // 配置熱更新的節(jié)點
        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'
    //     })
    // ]
};