vue注

1、vue-cli3创建运行项目:

vue-cli3可视化创建项目: vue ui
vue-cli3创建项目:vue create elementUI(elementUI为项目名称)
vue-cli3运行项目: npm run serve

2、vue-cli2创建运行项目:

vue-cli2创建项目:
1.安装nodejs
2.安装淘宝npm镜像:npm i -g cnpm
3.安装vue-cli:cnpm i vue-cli -g
4.查看vue版本:vue -V
5.创建项目:vue init webpack elementUI(elementUI为项目名称)
vue-cli2运行项目: npm run dev

3、vue打包命令: npm run build

4、vue-quill-editor文本编辑器位置超出隐藏就不显示的问题:

修改quill.js文件,改成左右上下不超出指定范围。

//left-position
left = left<(10-this.quill.root.parentNode.offsetLeft) ? (10-this.quill.root.parentNode.offsetLeft) : left;
left = left>(50-this.quill.root.parentNode.offsetLeft) ? (50-this.quill.root.parentNode.offsetLeft) : left;

 5、github不允许上传超过100M的项目,所以上传项目的时候不用上传node_modules文件夹。

手动删除node_modules文件夹后,package.json中依赖的包还存在的话,在终端执行命令,则可以自动下载package.json中的所有包,命令如下:npm install

6、$nextTick:修改data数据之后,引用引用过该数据的组件并不会立即改变,如用$nextTick引用的就是改变data之后的组件值。

<div ref="dom">{{ this.msg }}</div>
{{ this.msg1 }}
{{ this.msg2 }}
data(){
  return {
    msg: 'Hello',
    msg1: '',
    msg2: ''  
   }  
},
mounted(){
  this.msg = 'HAHA';
  this.msg1 = this.$refs.dom.innerHTML;
this.$nextTick(function(){
this.msg2 =
this.$refs.dom.innerHTML;
})
}

显示:

HAHA
Hello
HAHA

7、$refs只会在组件渲染完成之后生效。并且不是响应式的。所以应该避免在模板或者计算属性中访问$refs,$refs中不使用拼接。

<li class="audio-item media" v-if="item.type == 3" @click="handleClearInterval(item.id)">
    <xm-audio :audioSrc="item.content" :size="item.size" ref="audio"></xm-audio>
</li>
handleClearInterval(id) {

  const audioList = this.filterListByType(this.info.instHomeworkContents,3)

  _.each(audioList,(item,key)=>{

    if(item.id != id)  {

      console.log(this.$refs)

      console.log(this.$refs.audio[key]);

      this.$refs.audio[key].clearInterval()

    }

  })

}

 8、npm安装插件(-S,-D,-g)

npm install 本身就有一个别名 npm i

npm i module_name -S    即    npm install module_name --save     写入dependencies,发布到开发环境
npm i module_name -D    即    npm install module_name --save-dev  写入devDependencies,发布到生产环境
npm i module_name -g    即    global全局安装(命令行使用)
npm i module_name       即    本地安装(将安装包放在 ./node_modules 下)

9、兄弟组件之间通信

var bus = new Vue();
// 触发组件 A 中的事件
bus.$emit('id-selected', 1);
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
});

 

posted @ 2019-05-31 15:47  shirliey  阅读(...)  评论(... 编辑 收藏