vue-cli创建的vue项目学习

PS:这里有一些学习vue的视频资源,有需要的朋友可以去看看:https://fgk.pw/i/d0h05Lh2659

一、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、  :绑定一个方法,可传参

8、

  • :判断是否显示当前条目

    9、

  • :根据判断,绑定class属性,注意,里面是一个对象

      也可以不是一个字串,而是一个变量

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

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

    12、 :一个输入框架,并且数据绑定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中引入该组件 或者

    注意:在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、路由匹配到的组件将渲染在这里

    ... :要导向的页面,会渲染成一个标签

    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">标题1router-link>

    方式二:

     

     

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

     

     

     

     

     

     

  • 你可能感兴趣的:(vue.js)