首页 > 代码库 > vue.js主要内容

vue.js主要内容

vue的主要内容

1.了解vue

2.vue开发环境的搭建和脚手架工具的使用

3.vue具体的指令和项目实战

  1.了解vue

    1.具备基础:html、css、js,模块化概念、ES6语法(简单即可)

    2.特点: vue吸收了react和angular的优点

    3.vue的一个组件:template---------->html

          script-------------->js

          style--------------->css

    4.vue文件的后缀名是.vue

  2.vue开发环境的搭建和脚手架工具的使用

    1.vue开发环境的搭建-npm/cnpm命令行安装     

1 # 全局安装 vue-cli
2 $ npm install -g vue-cli
3 # 创建一个基于 "webpack" 模板的新项目
4 $ vue init webpack my-project
5 # 安装依赖,走你
6 $ cd my-project
7 $ npm install
8 $ npm run dev

    2.vue.js的重要组件

      1.data

      2.methods

      3.watch

      4.模板指令-html和vue对象的粘合剂

        数据渲染---->v-text,v-html,{{}}

        控制模块隐藏--->v-if,v-show---值是布尔值,区别是v-if直接不渲染,而v-show通过display:none隐藏

        渲染循环列表--->v-for

        事件绑定------->v-on:click="",简写@click=""

        属性绑定------->v-bind,例如v-bind:src="",简写:src="",:class="{}",:class="[]"

    【总结】

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

      2.data代表vue对象的数据,methods代表vue对象的方法,watch设置了对象监听的方法。

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

      4.重要的指令包括

         v-text[渲染数据]、v-if[控制显示]、v-on[绑定事件]、v-for[循环渲染]等。

vue.js主要内容