学习VUE(一)

一、项目初始化

　　1、安装vue-cli

　　　　win+r输入cmd调出命令行，输入：npm install -g vue-cli

　　2、初始化项目

　　　　vue init webpack (my-project)          ----------------括号里面为项目名

　　3、进入项目

　　　　cd my-project

　　4、安装依赖

　　　　npm install

　　5、启动项目

　　　　npm run dev

　　6、创建页面：

　　　　　　　　（1）、在src->compontents下面创建：例index.vue；里面开头结尾用

template标签包裹；

　　　　　　　　（2）、在src->router下的index.js中添加刚加号的路由；

　　　　　　　　（3）、以上步骤都已经添加好页面即可自动刷新;

二、项目目录结构

　　index.html：项目根视图

　　.postcssrc.js：postcss配置文件

　　static：静态文件目录

三、模板语法

　　Vue组件：

　　　　包含三个部分

　　　　　　template：视图

　　　　　　script：逻辑

　　　　　　style：样式

　　Mustache：模板

　　　　表现形式：{{语法}}

　　　　{{hello}}：变量        例子：<div>{{hello}}</div>    <script>export default{data(){return{hello:"HELLO VUE"}}</script>

　　　　{{1+1}}：数字

　　　　{{"哈哈"}}：字符串

　　　　{{0<10?'对的':'错的'}}：三元表达式

　　注意：只能存在单行语句

　　VUE基本指令

　　　　v-html：渲染文本

　　　　v-text：渲染文本

　　　　v-bind：绑定

　　条件渲染

　　　　v-if

　　　　v-else

　　　　v-else-if

　　　　v-show

　　　　问题：v-if与v-show有什么区别？　　　　

　　　　　　v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

　　　　　　v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

　　　　　　相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

　　　　　　一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使　　　　　　用 v-if 较好。

　　列表渲染：

　　　　v-for

　　　　每个列表都需要添加key

　　事件监听

　　　　v-on：

　　　　methods:

　　　　时间参数

　　　　修饰符:v-con:

　　　　简写：@代替v-con

　　数组更新检测：

　　　　变异方法：引起视图更新

　　　　替换数组：不会引起视图更新

　　显示过滤/排序结果：

　　　　filter