vue-cli创建的vue项目学习

一、vue-cli创建的项目的目录结构及说明

参考：http://blog.csdn.net/qq_34543438/article/details/72868546?locationNum=3&fps=1

二、webpack简介

参考：http://zhaoda.net/webpack-handbook/index.html

三、学习

1、new 一个vue对象的时候你可以设置它的属性，其中最重要的包括三个，分别是data，methods，watch。

2、其中data代表vue对象的数据，methods代表vue对象的方法，watch设置了对象监听的方法

3、vue对象里的设置通过html指令进行关联

4、重要的指令包括

1）、v-text渲染数据

2）、v-if控制显示

3）、v-on绑定事件

4）、v-for循环渲染

5）、v-html

6）、{{}}

7）、v-show

8）、v-bind  属性绑定

5、使用v-for项目时，会报红线，说需要什么key之类的，那是因为在vue2.2.0+版本以上，需要key的，解决

文件-》首选项-》设置-》用户设置，然后找到

"vetur.validation.template": true 项,

然后复制，在右边粘贴并把值改为false即可

参考：https://www.cnblogs.com/ninicwang/p/7698217.html

四、总结

1、.vue文件通过打包（webpack）成html/js/css文件

2、.vue文件由template(html)、style(css)、script(js)三部分组成

3、安装了cnpm后，使用到npm的地方都可以用cnpm（一般用于在需要下载的地方时使用）

4、ESlint  方法检查器

5、使用vue脚手架初始化vue项目时指定一套模板，然后进入该模板，下载相应的依赖，这些依赖中，可以把vue项目转换成浏览器能识别的文件。这些依赖代码的执行是通过node.js来执行的，能把vue项目转换成前端的静态文件等。因此在本地时，需要安装node.js服务，为的就是运行这些依赖代码等。但是，在本地开发的vue项目是无法在生产环境上运行的，因为放到服务器上的一般是html/js/css等文件，vue项目的目录浏览器是无法识别的。所以我们需要打包命令，是为了把vue等文件，打包成浏览器能识别的代码。打包的作用就跟vue的项目通过node.js服务访问的作用是一样的。（类别：php文件（vue项目文件）无法直接在浏览器中打开的，但是通过服务器解释后，变成静态文件后即可在注意器访问。打包的作用就比如通过浏览器访问服务php文件后得到的内容，把网页源代码保存文件一样。这样，直接在浏览器打开这些文件就可以了，而无须通过浏服务）。

6、data是函数，data () { return {} } 返回组件中要用到的数据

methods是一个属性 method{}里面是组件里定义的函数/方法

7、<button v-on:click="isShow(this)">点击修改</button>  ：绑定一个方法，可传参

8、<li v-for="site in sites" v-if="site.isShow" v-on:click="isShow(site)"> ：判断是否显示当前条目

9、<li v-for="site in sites" v-on:click="isShow(site)" v-bind:class="{myli:site.isShow}"> ：根据判断，绑定class属性，注意，里面是一个对象

<span v-bind:title="currenttime">  也可以不是一个字串，而是一个变量

10、[ ]表示数组 、{ }表示对象

11、vue指令里，操作的都是在data中定义的属性

12、<input v-model="message"> ：一个输入框架，并且数据绑定message属性

13、双向绑定：视图中的数据改变了，那么data中对应的属性数据也改变，同样，如果经过操作后，data的数据改变了，同样也会引起视图的改变。

14、watch:{} 监听数据的变动，用法多变：参考：http://blog.csdn.net/itkingone/article/details/69568498

15、父组件向子组件中传值，子组件可拿也可不拿，如果要拿的话，需要在子组件中通过props()来声明。

16、要使用其他组件时，要先引入其他组件所在的文件

import HelloWorld from './components/HelloWorld'  （注意：HelloWorld后面缺少了.vue，完整应该是HelloWold.vue）

17、2.5版本的vue实例不是通过var vue = new vue({});来创建的，而是通过export default{}来创建的

18、name：应该是表示组件的名称吧

components: {component1,componet2}：注册使用到的组件 如：components: { HelloWorld}

在template中引入该组件<hello-world></hello-world> 或者<hello-world/>

注意：在template中引入组件时，使用的组件的名字是将componets中注册的组件名字的驼峰的地方用-隔开，并且全小写，如：HelloWorld 就是 hello-world

19、使用自己创建的vue文件

创建自己的vue文件，包含三部分，template/script/style，其中在script中，必须有export default{ }，表示把当前的文件转成一个对象导出给外界使用，然后在使用到该vue文件的地方，需要先通过import来进行引入，并且指定一个别名。然后在data对象中，需要指定components，记住，这里指定的compontens必须要两个单词以上组成，并且单词的首字母都要大写（可以通过指定key-value的形式来形成这种形式）。然后在template中，将单词之间使用"-"来隔开，并且所有字母小写即可。

20、new vue({}) 与export defau的区别

var vm = new vue({}) 是为了实例化,而export default {}是导出模块,供其他模块进行调用, 这完全是两回事啊。

如果是引入的vue.js文件，那么一般来说是创建vue实例。但如果使用了webpack来开发，那么就使用export default，这个是es6的语法，打包完成后最终也是创建vue的实例。

21、指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

22、在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。

23、slot：插槽 表示父组件往子组件中插入一段DOM

参考：https://cn.vuejs.org/v2/guide/components.html#%E5%8D%95%E4%B8%AA%E6%8F%92%E6%A7%BD

24、vm.$emit(event,[args...])：触发当前实例上指定的事件，附加参数都会传给监听器回调

参考：https://cn.vuejs.org/v2/api/#vm-emit

25、es6学习书籍

http://es6.ruanyifeng.com/#docs/let

26、在使用vue-router时，访问的url会自动带上#，如http://localhost:8080/#/，如果不需要/#/时，可以在net Router对象时，配多一个属性，mode: 'history',

参考：https://router.vuejs.org/zh-cn/essentials/history-mode.html

27、<router-view></router-view>路由匹配到的组件将渲染在这里

<router-link to="/route|{path:'/route'}">...</router-link> :要导向的页面，会渲染成一个<a>标签

28、main.js是vue.js的入口文件，在这里创建一个vue实例，指定网页的首页页面，以及要挂载到的地方。template指定了首页的模板，因为使用了webpack，因此，可以使用component来引入一个组件，这个组件就是网站的首页面。

router/index.js这个文件定义了路由，是给后面的路径跳转进行匹配使用的。

29、

<transition>

<keep-alive>

<router-view></router-view>

</keep-alive>

</transition>

30、链接跳转

方式一：

<router-link to="one">标题1</router-link>

方式二：

<router-link :to="{path: '/two'}">标题2</router-link>