Vue.js中的部分细节记载

[Liudongge]

学习中，记录一些用到的知识点

[Liudongge]

下拉框中option绑定$index，使用:value="index"同select中的v-model绑定的值来进行绑定。
注意：其中应该用index而非$index。
http://stackoverflow.com/questions/37444045/bind-selected-option-index-with-vue-js

[Liudongge]

ES6中const let var的区别是？
let声明的变量只在块内或其子块内可用，这一点同var一样。区别是var在声明的作用域是整个封闭函数，而let只在块儿内。const声明常量，作用域同let一样，声明后无法修改（不报错但是修改失败）

[Liudongge]

Vue checkBox全选交互
https://jsfiddle.net/Simga/b6nhh3t9/1/

[Liudongge]

使用vue-cli搭配webpack生成项目框架。
文档：
http://vuejs-templates.github.io

[Liudongge]

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。
https://www.iviewui.com/

[Liudongge]

相对路径几个表达方式：

1. "../file"表示file文件的上一级目录，连写再往上父层目录推
2. "@/file"是webpack中配置的路径，一般指向‘src’文件夹
3. "./file"表示文件当前目录，连写无意义
4. "file"同3，表示文件当前目录
5. "/file"表示网站根目录，相当于服务器www目录

[Liudongge]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
扩展语句 在vue中的使用

[Liudongge]

vue文件中export default的属性：
filters
props

[Liudongge]

select的option中，默认选中vaule值与v-model中绑定的值初始值一样的那个option。例如

<select v-model="selectedIndex">
    <option value="undefined">{{industryText}}</option>
    <option v-for="item in items" :value="item.value">{{item.name}}</option>
</select>
return data() {
    selectedIndex: undefined // 此时默认选中第一个
    selectedIndex: '' // 此时默认选中items中，item.value为‘’的那个option
}

[Liudongge]

a(10)
function a(x){console.log(x+x)}
var a = function(x){console.log(x*x)}
a(10)

输出结果为 20 和100
代码流程相当于是

var a
function a(x){console.log(x+x)}
a(10)
a = function(x){console.log(x*x)}
a(10)

第一个输出是调用的函数声明语句创造的函数a()，第二个输出是定义表达式赋值的函数a()

[Liudongge]

新版vue-cli输入本地ip不能访问，只能用localhost才可以访问。
修改config文件夹下面的index.js配置，将localhost改为0.0.0.0就可以了。用ip，127.0.0.1，localhost均行

[Liudongge]

vue+webpack项目中的 public 文件夹

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。

注意我们推荐将资源作为你的模块依赖图的一部分导入，这样它们会通过 webpack 的处理并获得如下好处：

• 脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
• 文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。
• 最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。

public 目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀：

在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过 <%= BASE_URL %> 设置链接前缀：

<link rel="icon" href="<%= BASE_URL %>favicon.ico">
在模板中，你首先需要向你的组件传入基础 URL：

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

然后：

<img :src="${publicPath}my-image.png">

何时使用 public 文件夹

你需要在构建输出中指定一个文件的名字。
你有上千个图片，需要动态引用它们的路径。
有些库可能和 webpack 不兼容，这时你除了将其用一个独立的 <script> 标签引入没有别的选择。