vue.js主要内容

Posted 2020-08-15 砌墙的砖

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[循环渲染]等。