前端入职学习笔记-第二周第一天（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,
                    isShow:false,
                    myValue:

前端入职学习笔记-第二周第一天（Vue基础、Electron入门）

相关推荐