vue

vscode 快捷键

• ctrl + shift + p 打开搜索命令
• control + ` 吊起终端，关闭终端

---

vue指令

// v-once  绑定的内容只赋值一次，之后的赋值不会再改变
{{message}}

// v-html 他可以解析标签

js -->  url:'百度一下'

// v-text 展示文本内容，跟 {{}} 功能一样, v-text 会把标签内的内容全部覆盖，不会拼接。

js -->  message: '你好，世界！！!',

// v-pre 会把标签内的内容原封不动的展示出来，
{{message}}
js --> message:"hello world "
展示的内容依旧是 {{message}}

// v-cloak  防止插值闪烁， cloak 斗篷的意思
//  在vue 解析之前，标签中有一个 v-cloak 属性，
// 在vue 解析之后，标签中的v-cloak 属性会被删除掉
// 所以用css 把所有有v-cloak 属性的标签隐藏就可以达到防止标签闪烁的问题了

{{message}}

• v-bind 绑定属性

  // {{}} 绑定在小程序中可以绑定到属性，但是在浏览器中是不可以绑定到属性中的，只可以绑定到标签内容上。
 

    
    

        
        
        百度一下

        
        
hello world

        
        
        
hello world
        
        按钮

        
        
你好世界

        
        
哈哈哈

        
        
烽火戏诸侯
    
    
    

• computed 计算属性

    

      
{{fullName}}
      
{{allName}}
    
    
    

• 小知识：ES5 中，if ,for 是没有块级作用域的，只有 function 有块级作用域。
  ES6中，let 变量是有if,for 块级作用域的，
• 小知识：const 定义常量必须赋值，const 定义的对象不能修改，但是，对象的属性可以修改。
• v-on 事件监听

  

      
{{number}}
      
      按钮+
      
      按钮-
      
      按钮三
      
      按钮4

      

        
        
      

      

        

          
          
        
      

      

        
        
        
        
        一次点击
      
    

• v-if ,v-else-if ,v-else , v-show 条件判断

    

      
        
        用户账号 
        
      
      
      
      
      
        用户邮箱 
        
      
      切换账户
      
      
      
你好啊
    
    
    

• vue 数组中那些改变是响应式的，哪些不是响应式的

    

      

        
{{item}}
      
      按钮
    
    
    

• v-model 双向绑定

    

      
      

      
      
        
        男
      
      
        女
      
      
您选择的性别是：{{sexx}}

      
      
        同意协议
      
      
您选择的是：{{agree}}

      
      
        篮球
        足球
        乒乓球
        羽毛球
      
      
您选择的爱好是：{{hobbies}}

      
      
        苹果
        香蕉
        梨
      

      
      
        苹果
        香蕉
        梨
      

      
      
        {{item}}
      
      
您选择的家具是：{{furnitures}}

      
      
      
{{content}}

      
      
      
{{typeof numInput}}-{{numInput}}

      
    
    
    

• 组件化开发1

• 定义模板的时候必须有跟节点，就是必须写在
  内
• 模板传值的时候，js 里变量是驼峰命名法的，在html文件上就用 “-” 连接每一个驼峰单词。
• 组件通信父传子

• 用 this.$children 可以拿到所有的子组件
• 给组件加上 ref = "aaa" 他就相当于给组件加了一个id 之后可以通过 this.$refs.aaa 精准获取到想要拿的组件了。
• 组件通信子传父

    

      
      
      打印子组件按钮
    

    

    
    

• 组件化的 slot 插槽

    

      
        
我预留的插槽
      

      
      

      
      
      
        
      
    

    

    

    

    

    

• commenJS 制定规则模块规则 module.exports = {} 导出，let aa = require("../aa.js")导入
• es6 的模块的导入导出

//  aa.js 文件

var name = "小明"
var flag = true

// 导出方式1
export let age = "18"

// 导出方式2
export{
  flag
}

var obj = {
  name:"李留",
  age:10
}

// 默认导出的，再导入的时候名字可以随便起， 一个模块里只能有一个 default 导出
export default obj

// index.html 文件

    
    
    

// bb.js 文件

// 导入 export 导出的
// import {flag,age} from "./aa.js"

// 导入 export default 导出的
// import person from "./aa.js"

// 把整个aa.js 模块导出的变量，函数，对象，全部导入
import * as aaa from "./aa.js"


// if(flag){
  // console.log("我是你粑粑")
  // console.log(age)
  
// }

// console.log(person.name)

console.log(aaa.age)
console.log(aaa.default.name)

• webpack

// 命令
// 打包，webpack 入口文件   出口文件
webpack ./src/main.js ./dist/bundle.js  

// 初始化npm
npm init

// 导入npm 指定的包文件
npm install

// 配置一个webpack.config.js 文件，指定入口文件和出口文件，之后的打包命令就可以简写
// 为 webpack 而不需要带入口文件和出口文件了
// webpack.config.js 文件内的配置内容如下
const path = require("path")

module.exports = {
  entry:"./src/main.js",
  output:{
    path:path.resolve(__dirname,"dist"),
    filename:"bundle.js"
  }
}

// 在package.json 配置文件内指定脚本 build 为webpack ,
// 之后就可以使用 npm run build 指代 webpack 打包进行打包了
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },

// 安装一个项目内的webpack ，webpack 是开发时依赖（上线的项目不需要webpack 了）
// 在终端敲webpack 都是用的全局的webpack ，影射到 build 命令上执行 npm run build 就会优先执行本地的webpack
npm install [email protected] --save-dev

// webpack 打包css ，less 等其他除了js 文件之外的文件，需要合适的loader来
// 帮忙
npm install --save-dev css-loader
// css-loader 只负责将css文件加载，不负责渲染到界面，所以还需要加载一个style-loader
npm install style-loader --save-dev

// webpack.config.js 文件内加loader引用
// webpack 读取多个loader时，是从右往左读的，所以use数组才会这么写。
  module:{
    rules:[
      {
        test: /\.css$/,
        use: [ 'style-loader','css-loader' ]
      }
    ]
  }

• webpack 中文翻译文档 https://www.webpackjs.com/loaders/style-loader/