Vue2.0 【第一季】内部指令

记录一下我的代码地址：D:/Code/Vue

编辑器：VS code

前置知识：

1.HTML的基础知识，你需要达到中级水平，写前端页面的结构代码完全没有问题。

2.CSS的基础知识，最好做过半年以上的切图和布局，最好了解CSS3的知识。

3.Javascript的基础知识，对基本语法掌握，要求不高。

4.node.js初级知识，只需要会npm的使用和项目初始化就可以了。（可不需）

第一节 走进我的Vue2.0

  • 下载vue2.0的两个版本：https://cn.vuejs.org/

    “学习” -> "教程" -> "安装" -> "开发版本和生产版本都下载"

  • 项目结构搭建

    D盘新建文件夹Code，在Code里面新建文件夹Vue，将文件夹Vue拖进VS code；

    VS中的操作：（js中的两个文件直接从刚才下载的文件夹拖入）

  • index.html 的内容:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Vue.js实例</title>

</head>

<body>

    <h1>Vue2.0实例</h1>

    <hr>

    <ol>

        <li><a href="./example/helloworld.html">Hello World实例</li>

    </ol>

</body>

</html>

至此项目基本建完，需要安装live-server（VS终端）：

cnpm install -g live-server

在项目目录中打开：

live-server

可以看到浏览器启动的页面：

关掉ctrl+c终端服务，初始化一下前端效果：

cnpm init

name：vue 小写字母就行

description：Vue Demo

entry point：回车即可，这里不改

test command：回车

git repository：回车，有git库就写

keywords：回车，可不写

author：Cardiac（写自己的）

建完以后，在Vue中就生成package.json文件（方便以后进行包的管理）：

  • 可以进行第一个文件的编写，在example文件夹下新建helloworld.html

    helloworld.html 的内容:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HelloWorld</title>

    <script type="text/javascript" src="../assets/js/vue.js"></script>

</head>

    <body>

        <h1>Hello World</h1>

        <hr>

        <div id="app">

            {{message}}

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el:'#app',

                data:{

                    message:'hello Vue!'

                }

            })

        </script>

    </body>

</html>

启动服务器live-server，就可看到页面，点击Hello World实例链接：

Vue2.0 【第一季】第1节 走进我的Vue2.0的更多相关文章

  1. 分布式压测系列之Jmeter4.0第一季

    1)Jmeter4.0介绍 jmeter是个纯java编写的开源压测工具,apache旗下的开源软件,一开始是设计为web测试的软件,由于发展迅猛,现在可以压测许多协议比如:http.https.so ...

  2. Vue2.0 【第一季】第8节 v-pre & v-cloak & v-once

    目录 Vue2.0 [第一季] 第8节 v-pre & v-cloak & v-once v-pre 指令 v-cloak 指令 v-once 指令 Vue2.0 [第一季] 第8节 ...

  3. Vue2.0 【第一季】第7节 v-bind指令

    目录 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v-bind缩写 绑定CSS样式 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v- ...

  4. Vue2.0 【第一季】第6节 v-model指令

    目录 Vue2.0 [第一季] 第6节 v-model指令 第6节 v-model指令 一.一个最简单的双向数据绑定代码: 二.修饰符 三.文本区域加入数据绑定 四.多选按钮绑定一个值 五.多选绑定一 ...

  5. Vue2.0 【第一季】第5节 v-on：绑定事件监听器

    目录 Vue2.0 [第一季] 第5节 v-on:绑定事件监听器 第五节 v-on:绑定事件监听器 一.使用绑定事件监听器,编写一个加分减分的程序. Vue2.0 [第一季] 第5节 v-on:绑定事 ...

  6. Vue2.0 【第一季】第4节 v-text & v-html

    目录 Vue2.0 [第一季]第4节 v-text & v-html 第四节 v-text & v-html Vue2.0 [第一季]第4节 v-text & v-html 第 ...

  7. Vue2.0 【第一季】第3节 v-for指令：解决模板循环问题

    目录 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题 第三节 v-for 指令 一.基本用法: 二.排序 三.对象循环输出 Vue2.0 [第一季] 第3节 v-for指令:解决模 ...

  8. Vue2.0 【第一季】第2节 v-if v-else v-show 指令

    目录 Vue2.0 [第一季]第2节 v-if v-else v-show 指令 第二节 v-if v-else v-show 指令 2.1 v-if指令.v-else指令: 2.2 v-show的使 ...

  9. NHibernate.3.0.Cookbook第一章第六节Handling versioning and concurrency的翻译

    NHibernate.3.0.Cookbook第一章第六节Handling versioning and concurrency的翻译   第一章第二节Mapping a class with XML ...

随机推荐

  1. 百度AI技术

    利用百度提供接口,实现智能语音 语音合成 -- TTS(text to speech) 注册 在 ai.baidu.com 页面中点击 控制台 ,弹出登陆 / 注册页面 创建应用 登陆成功后,点击左侧 ...

  2. Mysql主从同步原理简介

    1.定义:当master(主)库的数据发生变化的时候,变化会实时的同步到slave(从)库. 2.好处: 1)水平扩展数据库的负载能力. 2)容错,高可用.Failover(失败切换)/High Av ...

  3. C++ 部分STL

    map map可以理解为一个数组(但实质上并不是,只是方便理解),我们一般的数组不管定义成什么类型他的下标都是整型(int),map和这些数组的区别是他的下标可以是其他类型,由自己定义.map的创建. ...

  4. Ubuntu全方位美化，定制教程

    Ubuntu全方位美化,定制教程 上一篇随笔聊了聊Linux图形界面的各种名词及其关系,解释了何为xserver,何为xclient,linux的图形界面是如何工作的,Linux图形软件的多样性.li ...

  5. 配置Oracle10g即时客户端plsql的配置

    看到网上有好多的Oracle客户端精简版本,但是这些都不是出自Oracle官方之手,难免可能会出现一些问题.经过我奋战一个小时终于搞定了这个 Oracle10g即时客户端 的配置了 1.先到Oracl ...

  6. Ubuntu和window10 安装双系统

    先安装window10,然后空出一部分储存空间,我空出来了103G. 然后安装ubuntu分区的时候注意: 刚开始安装的时候:出现安装类型的时候:选择其他选项: 在分区的时候:单击127117(这里是 ...

  7. 华为云linux服务器部署TensorFlow-gpu全攻略

    最近在玩谷歌新开源的自然语言模型bert,最开始是在google的免费GPU上面来弄的(这个部分其实也是可以写一个教程的,中间坑也挺多).但谷歌比较坑人,小数据集还行,大点的数据集训练耗费时间长,再加 ...

  8. mysql视图、事务、触发器、索引

    视图 什么是视图 ? 一个查询语句的结果是一张虚拟表,将这种虚拟表保存下来,它就变成了一个视图. 为什么要用视图? 当频繁需要用到多张表的连表结果,你就可以事先生成好视图,之后直接调用即可,避免了反复 ...

  9. 奇葩念头：微信能取代WP应用吗

         墙倒众人推,原本是再平常不过的事,但每次发生都显得特别凄凉--就和楼市买房买涨不买跌一样,在互联网行业,用户数量越多的产品或服务,就会越受到行业和大众青睐.而越是小众的产品或服务,虽然是要走 ...

  10. 微信小程序配置二

    tabBar 客户端窗口底部的tab页面切换,只能配置最好两个.最多5个tab 属性说明: 属性 类型 必填 默认值 描述 color HexColor 是 tab上的文字默认颜色 selectedC ...