vue 起步

vue 官网

目前最火的前端框架当属Vue.js了，很多使用过vue的程序员这样评价它，“vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。授予了这么高的评价的vue.js，也是开源世界华人的骄傲，因为它的作者是位中国人–尤雨溪（Evan You）。

Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

vue 官网：https://cn.vuejs.org/

vue 学习手册：https://cn.vuejs.org/v2/guide/index.html

实现 hello world 程序编辑

vue 不支持 IE8 及以下版本，因为 vue 是用来 IE8 无法模拟的 ECMAScript5 特性，但是它支持所有 ECMAScript5 的浏览器。

vue.js 开发版本地址：https://vuejs.org/js/vue.js

目录结构：

原生 js 写法：

index.html

<!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>Hello World</title>

</head>

<body>

    <div id="app"></div>

    <script>

        var dom = document.getElementById("app");

        dom.innerHTML = "hello world"

    </script>

</body>

</html>

使用 vue.js 编写：

<!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>Hello World</title>

    <!-- 引入 vue.js 库文件 -->

    <script src="vue.js"></script>

</head>

<body>

    <!-- 调用 data 中的 content 对应的数据 -->

    <div id="app">{{content}}</div> 

    <script>

        // 实例化一个vue实例

        var app = new Vue({

            el:'#app', // 配置项，表示实例负责管理的区域，指id=app的div标签。

            data:{

                content:"Hello World"

            }

        })

    </script>

</body>

</html>

文字两秒钟后动态变换

原始js

<!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>Hello World</title>

    <!-- 引入 vue.js 库文件 -->

    <script src="vue.js"></script>

</head>

<body>

    <div id="app"></div> 

    <script>

        var dom = document.getElementById("app")

        dom.innerHTML="hello world"

        setTimeout(() => {

            dom.innerHTML="by world"

        }, 2000);

    </script>

</body>

</html>

vue.js

<!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>Hello World</title>

    <!-- 引入 vue.js 库文件 -->

    <script src="vue.js"></script>

</head>

<body>

    <!-- 调用 data 中的 content 对应的数据 -->

    <div id="app">{{content}}</div> 

    <script>

        // 实例化一个vue实例

        var app = new Vue({

            el:'#app', // 配置项，表示实例负责管理的区域，指id=app的div标签。

            data:{

                content:"Hello World"

            }

        }) 

        setTimeout(() => {

            app.$data.content="by world"

        }, 2000);

    </script>

</body>

</html>

使用 Vue.js 实现 TodoList

通过 input 框，想已有列表项中添加一条信息。

<!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>ToDoList</title>

    <!-- 引入库文件 -->

    <script src="./vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- v-model 数据-双向绑定 -->

        <input type="text" v-model="inputValue">

        <!-- v-on vue中用来绑定事件 -->

        <button v-on:click="handleBtnClick">提交</button>

        <ul>

            <!-- <li>第一课的内容</li>

            <li>第二课的内容</li> -->

            <!-- v-for 用来循环 -->

            <li v-for="item in list">{{item}}</li>

        </ul>

    </div>

    <script>

        // 创建一个示例

        var app = new Vue({

            el: '#app',

            // data 用于数据绑定

            data: {

                // 用于存储数据

                list: [],

                // 用于与输入框数据-双向绑定

                inputValue: '',

            },

            // 用于构造方法

            methods: {

                // 提交事件

                handleBtnClick: function () {

                    //  获取 input 框内容.

                    // alert(this.inputValue)

                    // push 向集合list添加数据

                    this.list.push(this.inputValue)

                    // 清空输入框

                    this.inputValue = ''

                }

            }

        })

    </script>

</body>

</html>

添加事件：v-on:click="handleBtnClick"

数据绑定：v-model="inputValue"

数据循环输出：v-for="item in list"

MVVM 模式

一般前端设计的 MVP 模式

　　M：模型层

　　V：视图层

　　P：控制层

VUE 的 MVVM 模式

　　M：模型层

　　V：视图层

　　VM：ViewModel 层

　　总结：以前使用 jQuery 编辑代码的时候主要是使用MVP面向于DOM进行开发，而现在使用MVVM开发的过程中是面向数据进行开发编程。

前段组件化

组件，是个人页面的一部分。分成多个组件，可以将一个大型的项目按照拼积木的方式搭建起来。一个项目很庞大，但是将这个大项目划分成很多组件，使得每个组件很精小，有利于开发和维护。

记住一点，每一个组件其实就是页面上的一个区域。

通过组件化，优化 ToDOList 功能

<!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>ToDoList</title>

    <!-- 引入库文件 -->

    <script src="./vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- v-model 数据-双向绑定 -->

        <input type="text" v-model="inputValue">

        <!-- v-on vue中用来绑定事件 -->

        <button v-on:click="handleBtnClick">提交</button>

        <ul>

            <!-- <li>第一课的内容</li>

            <li>第二课的内容</li> -->

            <!-- v-for 用来循环 -->

            <!-- <li v-for="item in list">{{item}}</li> -->

            <!-- 与TodoItem绑定 -->

            <!-- v-bind通过变量content将item传给TodoItem子组件 -->

            <todo-item v-bind:content="item" v-for="item in list"></todo-item>

        </ul>

    </div>

    <script>

        // 创建全局组件,名字叫做TodoItem，内容是li标签。全局组件不需要在vue示例中注册

        // Vue.component("TodoItem", {

        //     // 接受前段绑定的content数据

        //     props: ['content'],

        //     template: "<li>{{ content }} </li>",

        // })

        // 局部组件,在示例中必须被注册，全局组件不需要

        var TodoItem = {

            // props是指外部传递回来的数据

            props: ['content'],

            template: "<li>{{ content }}</li>",

        }

        // 创建一个示例

        var app = new Vue({

            el: '#app',

            // 将局部组件注册到示例中。

            components: {

                TodoItem: TodoItem,

            },

            // data 用于数据绑定

            data: {

                // 用于存储数据

                list: [],

                // 用于与输入框数据-双向绑定

                inputValue: '',

            },

            // 用于构造方法

            methods: {

                // 提交事件

                handleBtnClick: function () {

                    //  获取 input 框内容.

                    // alert(this.inputValue)

                    // push 向集合list添加数据

                    this.list.push(this.inputValue)

                    // 清空输入框

                    this.inputValue = ''

                }

            }

        })

    </script>

</body>

</html>

组件间传值

父子组件传值问题，案例，在 ToDoList 案例中添加，点击列项删除功能。

<!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>ToDoList</title>

    <!-- 引入库文件 -->

    <script src="./vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- v-model 数据-双向绑定 -->

        <input type="text" v-model="inputValue">

        <!-- v-on vue中用来绑定事件 -->

        <button v-on:click="handleBtnClick">提交</button>

        <ul>

            <todo-item v-bind:content="item"

            v-bind:index="index"

            v-for="(item,index) in list"

            @delete="handleItemDelete">

            </todo-item>

        </ul>

    </div>

    <script>

        var TodoItem = {

            props: ['content','index'],

            // @click=  等同于 v-on:oclick=,方法写在子组件方法当中。

            template: "<li @click='handleItemClick'>{{ content }}</li>",

            methods: {

                // 子组件点击方法

                handleItemClick: function () {

                    //当子组件按下，向外触发一个事件。

                    this.$emit("delete",this.index)

                }

            }

        }

        // 创建一个示例

        var app = new Vue({

            el: '#app',

            // 将局部组件注册到示例中。

            components: {

                TodoItem: TodoItem,

            },

            // data 用于数据绑定

            data: {

                // 用于存储数据

                list: [],

                // 用于与输入框数据-双向绑定

                inputValue: '',

            },

            // 用于构造方法

            methods: {

                // 提交事件

                handleBtnClick: function () {

                    //  获取 input 框内容.

                    // alert(this.inputValue)

                    // push 向集合list添加数据

                    this.list.push(this.inputValue)

                    // 清空输入框

                    this.inputValue = ''

                },

                // 父组件删除选项,index为列表元素的下标

                handleItemDelete: function (index) {

                    // 从传进的下标位置开始删除一项。

                    this.list.splice(index,1)

                }

            }

        })

    </script>

</body>

</html>

　　@click= 等同于 v-on:oclick=

　　:content= 等同于 v-bind:content=

vue 起步的更多相关文章

Vue起步
Vue起步 Vue.js是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式javascript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...
vue 起步走 --“安装篇”
在说明之前,溶解得在这说一句 ,菜鸟开始安装这些东西真是不容易,各种疯狂的百度,搜索.(找的我眼泪都快流下来了),不说废话,开始正经. 第一步:环境的搭建 : vue推荐开发环境: Node.js: ...
初识vue——起步
一.目录结构: 我们经常使用的是以下几个目录: 1.assets:静态资产文件:在vue组件中,所有组件中,所有模板和CSS都会被vue-html-loader和css-loader解析,并查找资源u ...
vue起步和模板語法
vue構造器里有哪些內容: var a=new Vue({}) 模板語法: 文本插值: html: html的屬性里的值應該使用v-bind: 表達式: 指令; 參數:v-bind,v-on 雙向用戶 ...
vue 起步_code
<template> <div class="hello"> <h1>{{ msg }}</h1> <div>{{dat ...
【Vue起步-Windows】N01：环境安装
本文基于“vue.js安装过程(npm安装)”文章内容及个人出现的问题整合而成. 1.安装npm环境在Node官网中下载最新的windows版msi安装包,并默认所有安装选择. 2.查看npm安装版 ...
webpack+vue起步
本文基于vue1.x 基于vue2.x&webpack2.x请移步至 Vue2.x踩坑与总结Webpack2.x踩坑与总结记得第一次知道Vue.js是在勾三股四大大的微博,那时候他开始翻译v ...
vue 起步（一）
准备安装nodejs(下载),Windows 安装包(.msi) npm相关打开cmd查看npm版本, npm -v,如果没有安装npm,执行npm install npm -g进行安装查询当前 ...
第二章、 Vue 起步
2-2.编写hello world 首先创建vue实例,然后实例接收一些配置项,el表示实例负责管理的区域,data表示区域内的数据两秒后内容变为bye world 其中app表示实例对象,$dat ...

随机推荐

gcc 6.2.0/6.3.0/8.2.0 编译安装
参考:http://www.linuxfromscratch.org/blfs/view/stable/general/gcc.html 下载地址在这里:https://ftp.gnu.org/gnu ...
Jenkins自动化构建(一)执行selenium+python脚本
Jenkins执行python写的selenium自动化脚本,通常会遇到,执行打不开浏览器,查看jenkins构建Console Output控制台输出信息,发现脚本是执行了的,但是出错了,打开浏览器 ...
Tortoisegit和GitHub使用入门
作为一个Code人对于github并不陌生吧,记录下使用说明: gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub. 工具: git: ...
codeforces 185A Plant(推公式)
Plant [题目链接]Plant [题目类型]推公式 &题解: 这个是可以推公式的: 每年的总个数是4^n个,设n年时向上的个数是x个,向下的个数是y个,那么n+1年时,向上的个数是3* x ...
Ecust DIV3 k进制【暴力不断优化】
K进制 Description 给定一个正整数n,请你判断在哪些进制下n的表示恰好有2位是1,其余位都是0. Input 输入第一行为整数TT,表示有TT组数据(1 \le T \le 50)(1≤T ...
PID控制動手玩玩看
PID控制動手玩玩看 PID三個參數到底該怎麼調才好,真的是一門藝術. 雖然在Marlin韌體內有提供自動測量的功能,但是測得的結果,不見得能令人滿意,還是需要調整.可是到底該怎麼調整?從哪個參數開始 ...
jQuery筛选--hasClass(class)和eq(index|-index)
hasClass(class) 概述检查当前的元素是否含有某个特定的类,如果有,则返回true 参数 class 用于匹配的类名 <!DOCTYPE html> <html> ...
大数据处理框架之Strom：认识storm
Storm是分布式实时计算系统,用于数据的实时分析.持续计算,分布式RPC等. (备注:5种常见的大数据处理框架:· 仅批处理框架:Apache Hadoop:· 仅流处理框架:Apache Stor ...
虚拟机连不上网 Xshell连不上虚拟机
以centos7 为例 1,确定network connection 为NAT 2, 打开网络连接中心 Control Panel\Network and Internet\Network Conne ...
python 读csv数据通过改变分隔符去掉引号
import csv with open(r'C:\Temp\ff.csv') as f: f_csv=csv.reader(f,delimiter='\t') headers=next(f_csv) ...