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}}
  • v-if ,v-else-if ,v-else , v-show 条件判断

    
你好啊
  • vue 数组中那些改变是响应式的,哪些不是响应式的

    
  • {{item}}
  • v-model 双向绑定

    

您选择的性别是:{{sexx}}

您选择的是:{{agree}}

您选择的爱好是:{{hobbies}}

您选择的家具是:{{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/

你可能感兴趣的:(vue)