前端入职学习笔记-第二周第一天（Vue基础、Electron入门）
学习路径
Vue
1、Vue基础
1.1 安装Vue
一般vue的安装以及其开发过程需要用到的一些包的安装使用的都是npm命令，但是 npm 安装速度慢，可以使用淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
# 查看版本
$ npm -v
2.3.0
#升级 npm
cnpm install npm -g
# 升级或安装 cnpm
npm install cnpm -g
# 最新稳定版
$ cnpm install vue
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd my-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
进入项目，安装并运行：
$ cd my-project
$ cnpm install
$ cnpm run dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080
成功执行以上命令后访问 http://localhost:8080/。
1.2 插值表达式
格式：{{表达式}}
对象（不连续3个{{ {name: 'jack'} }}）
字符串 {{'xxx'}}
判断后的布尔值 {{true}}
三元表达式 {{true？'是正确': '错误'}}
可以应用于页面中简单粗暴的调试
注意：必须在data这个函数的返回对象中声明
1.3 常用基础指令
v-text
将一个变量的值渲染到指定的元素当中
v-html
可以给出真正输出html元素
v-bind（或者使用":"）
绑定页面中元素的属性
v-if和v-show
v-if：
作用：判断是否加载固定的内容，如果是真就加载，如果是假就不加载
语法：v-if="判断表达式"
v-show
作用：判断是否显示内容
语法：v-show="判断表达式"
v-on（或者使用"@"）
作用：对页面中事件进行绑定
语法：v-on:时间类型="监听器"
指令使用示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- -->
<div id="app"></div>
<script src="vue-2.4.0.js"></script>
<script>
new Vue({
el:'#app',
template:`
<div>
<span v-text="myText"></span>
<hr/>
<span v-html="myHtml"></span>
<button v-if="num == 1">测试v-if</button>
<button v-else-if="num == 2">测试v-else-if</button>
<button v-else>测试v-else</button>
<hr/>
<button v-show="isShow">测试v-show</button>
<hr/>
<input type="text" v-bind:value="myValue">
<!-- 常量需要加'' -->
<input type="text" v-bind:value="'常量'">
<hr/>
<button v-on:click="myValue='abc'">点我改变myValue的值</button>
<button @click="myValue='bcd'">点我改变myValue的值</button>
</div>
`,
data:function(){
return {
myText:'我是text的值！',
myHtml:'<h1>我是html的值！</h1>',
isExit:true,
num:23