钻研 Vue.JS框架

Vue-cli入门

Vue-cli 是Vue.js的脚手架工具能帮我们完成Vue.js基础代码的生成等

目录结构生成
本地调试
代码部署
热加载
单元测试

安装Vue-cli 讲解

1.打开cmd命令行执行 $ node -v
检查是否安装 node.js (vue-cli依赖node.js)

2.用cnpm install -g(全局安装) vue-cli
(淘宝的镜像10分钟更新一次npm源)

此处输入图片的描述

3.验证 Vue-cli 是否安装成

执行$ vue安装成功则返回Vue-cli的命令行参数

此处输入图片的描述

用Vue-cli 创建一个Vue.js项目

1.使用查看可用的Vue.js代码模板
使用 $ vue list命令查看本地存在的所有Vue.js模板

此处输入图片的描述

2.利用 Vue-cli 创建一个基于 webpack 模板的 Vue.js项目
使用 $ vue init <template-name> <project-name>创建一个基于Vue-cli 的自定义 Vue.js 项目
例: $ vue init vue init webpack Demo1基于 webpack模板名称为Demo1的Vue.js项目

此处输入图片的描述

3.加载webpack模板需要的依赖(cnpm install 把依赖代码库加载到 node_modules)
CMD命令行进入Demo1项目根目录执行 $ cnpm install

此处输入图片的描述

4.让这个Vue.js项目跑起来
CMD命令行进入Demo1项目根目录执行 $ cnpm run dev
node.js默认开启一个server监听 localhost:8080

Vue.js 简单语法

v-bind:title 可简写为 :tilte (标签属性绑定表达式)
v-on:click 可简写为 @click (标签事件绑定表达式)
v-model (数据双向绑定)

computed: { Vue.js 计算属性:根据其它数据计算结束返回一个新的变量
fullName:function () {
return this.firstName+this.lastName;
}
},

watch: { Vue.js 监听属性:监听数据的变化并做出反应
fullName:function (){ // 监听计算属性
this.sum ++;
}
}

<div v-show="show">v-show属性:条件满足时为当前标签添加 CSS 隐藏属性 ,不满足时去除 CSS 隐藏属性 (频繁触发场景下推荐!)

<div v-if="show">v-if属性: 条件满足时从DOM树上删除当前标签并用注释代替 ,不满足时从DOM树上添加当前标签; (单页面只触发几次场景下推荐!)

<div v-bind:class="{isShowAmplify:data中定义布尔值A, isShowRed:data中定义布尔值B, classObj (在data中定义一个对象包含A,B,多绑定class情况推荐)}">
v-bind:class属性(外联样式): 在data中定义多个布尔值 A,B, 以 A,B 的值来控制当前标签的class显示 , ture 为A,B控制的样式显示 , false A,B 为控制的样式失效, 也可以在data中定义对象来管理, 也可以由 computed 来控制动态显示

classObj :{ 
      isShowAmplify:true,
      isShowRed:false 
}}}
<style scoped> (加上 scoped 只对当前页面有效)
.isShowAmplify{fontSize:80px} (外联样式不需要 "" )
.isShowRed{color:red}
</style>

<div v-bind:style="styleObj (在data中定义styleObj动态控制内联样式显示)">
v-bind:style(内联样式): 直接改变 data中styleObj 对象的值,即可使视图内联样式更新 (数据驱动 , MVVM)

styleObj :{ 
      color:"red", (内联样式需要 "" )
      fontSize:"30px"
}}}

v-for属性: 按表达式迭代一组数据中的每个数据
<li v-for="(single,index) of todos" :key="index">{{single}}</li> data:{ todos:[ {text:'学习Javascript'}, {text:'学习Vue'}, {text:'整个牛项目'} ]}