一、什么是Vue

Vue.js是一个渐进式 JavaScript 框架

通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目

为什么要学习Vue

三大主流框架之一：Angular React Vue

先进的前端设计模式：MVVM

可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发

特点

单页面web应用

数据驱动

数据的双向绑定

虚拟DOM

如何使用Vue

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>使用vue</title>

</head>

<body>

	<div id="box1">

		{{ }}

	</div>

	<hr>

	<div class="box2">

		{{ }}

	</div>

</body>

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

<script>

	/*

		拿到jquery框架的对象 ($ | jQuery) ===> 使用jquery框架

		拿到vue框架的对象 ( new Vue() ) ===> 使用vue框架

	*/

	// vue对象需要手动创建, 原因是一个vue对象可以只控制页面中的某一部分, 如果一个页面有多个部分都需要被控制, 那么就需要创建多个vue对象

	/*

	  vue对象如何与控制的页面进行绑定关联

	  	采用的是vue对象中的挂载点(挂载点可以唯一标识页面中的某一个区域)

	*/

	new Vue({

		el: "#box1"

		// 挂载在id为box1的div上, 那么该div下的所有内容都由该vue对象来控制

	});

	new Vue({

        el: '.box2'

        // 挂载在class为box2的div上, 那么该div下的所有内容都由该vue对象来控制 (尽量使用id, 唯一标识)

    })

</script>

</html>

Vue的挂载点（vue实例）

<body>

    <div id="app">

        {{ msg }}

    </div>

</body>

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

<script>

    // Vue实例会根据数据产生虚拟DOM,最终替换掉挂载点的真实DOM(不要挂在到body上)

    var app = new Vue({

        el: '#app',

        data: {

            msg: "开启vue学习之路"

        }

    });

    // 如果需要使用vue对象(实例), 那么就可以接受Vue创建的结果, 反之就不需要接收

    console.log(app);

    console.log(app.$attrs); // vue实例的变量都是以$开头

    console.log(app.$el);

    console.log(app.$data.msg);

    console.log(app.msg);

    // app对象 = new Vue()实例 = 标签div#app组件

</script>

vue的基础指令

  • 文本指令
<body>

    <div id="app">

        <p>{{ info }}</p>

        <!-- v-text 为vue的文本指令 ="info" , info为vue实例data中的一个变量 -->

        <p v-text="info"></p>

        <p v-text="msg"></p>

        <p v-html="res"></p>

    </div>

</body>

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

<script>

    new Vue({

        el: "#app",

        data: {

            info: "插值表达式",

            msg: "文本指令",

            res: "<b>加粗的文本</b>"

        }

    })

</script>
  • 属性指令
<body>

    <div id="app">

        <!-- v-bind:属性 = "变量" -->

        <!-- 如果abc自定义属性被v-bind:指令绑定了,后面的值也会成为vue变量, 如果就想是普通字符串, 再用''包裹 -->

        <!-- : 就是 v-bind: 的简写方式 (1.常用 2.一定且只操作属性)-->

        <p v-bind:abc="'abc'" v-bind:title="h_info" :def="hehe">abc</p>

        <!--最常用的两个属性 class | style-->

        <!--class-->

        <p :class="a"></p> <!-- 单类名 -->

        <p :class="[a, b]"></p> <!-- 多类名 -->

        <p :class="{c: d}"></p> <!-- 了解: c为类名,是否起作用取决于d值为true|false 开关类名 -->

        <!--style-->

        <p :style="s1"></p> <!-- s1为一套样式 -->

        <p :style="[s1, s2, {textAlign: ta}]">12345</p><!-- 了解: s1,s2均为一套样式, ta是一个变量,专门赋值给textAlign("text-align") --> 

    </div>

</body>

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

<script>

    new Vue({

        el: "#app",

        data: {

            h_info: "悬浮提示",

            hehe: "呵呵",

            a: 'active',

            b: 'rule',

            d: false,

            s1: { // 样式1: 值1, ..., 样式n: 值n

                width: '200px',

                height: '200px',

                background: 'red'

            },

            s2: {

                borderRadius: '50%'

            },

            ta: 'center'

        }

    })

</script>
  • 事件指令
<body>

    <div id="app">

        <!-- v-on:事件 = "变量 简写 @ -->

        <!-- 事件绑定的变量可以在data中赋值,但建议在methods中赋值 -->

        <p v-on:click="fn1">11111111111111</p>

        <p @click="fn2">22222222222222</p>

        <!--vue事件的绑定可以传自定义参数-->

        <p @click="fn3(333)">3333333333333333</p>

        <!--vue事件的绑定不传自定义参数, 默认将事件对象传过去了-->

        <p @click="fn4">4444444444444444</p>

        <!--vue事件的绑定传自定义参数, 还要将事件对象传过去了, 要明确传$event-->

        <p @click="fn5(555, $event)">5555555555555555</p>

    </div>

</body>

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

<script>

    new Vue({

        el: "#app",

        data: {

            // 事件在data中提供一个函数地址,可以实现事件

            fn1: function () {

                console.log("11111111111111")

            }

        },

        // 事件尽量(要求)都放在vue实例的methods中

        methods: {

            fn2: function () {

                console.log("22222222222222")

            },

            fn3 (arg) {  // ES6语法

                console.log(arg)

            },

            fn4: function (ev) {

                console.log(ev)

            },

            fn5: function (arg, ev) {

                console.log(arg)

                console.log(ev)

            },

        }

    })

</script>
  • 表单指令
<body>

    <div id="app">

        <!-- v-model = "变量" 本质操作的就是表单元素的value -->

        <!--v-model就是完成数据的双向绑定-->

        <form action="">

            <input type="text" v-model="info"> <!-- info变量就是代表输入框的value -->

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

        </form>

        <p> {{ info }} </p>

        <!--v-once只会被赋值一次,就不再改变,并且要结合插值表达式使用-->

        <p v-once="info">{{ info }}</p>

    </div>

</body>

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

<script>

    new Vue({

        el: "#app",

        data: {

		// info: "初始value",

            info: ""

        },

    })

</script>

Vue的介绍及基础指令的更多相关文章

  1. vue学前班004（基础指令与使用技巧）

    我学vue 的最终目的是为了 做apicloud 和vue 的开发  作为配合apicloud的前端框架使用 所以项目用不到的会暂时不介绍. (强烈建议  官网案例走一遍) 基础指令的学习(结合aui ...

  2. vue.js介绍，常用指令，事件，以及制作简易留言版

    一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...

  3. Vue.js框架的基础指令

    Vue.js 渐进式 javascript 框架,可以独立完成前后端分离式web项目的javascript框架 js是页面脚本语言,用来控制或是辅助页面搭建,vue是js功能的集合体. 三大主流前端框 ...

  4. vue.js_02_vue.js的基础指令

    1.v-cloak 作用:解决插值表达式闪烁的问题 当网速过慢时,或者加载数据时间过长时,网页会出现  {{msg}}  的现象 使用方法: <!--缺陷需要写style样式--> < ...

  5. [Vue入门及介绍，基础使用、MVVM架构、插值表达式、文本指令、事件指令]

    [Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 ​ 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...

  6. Vue 2.0入门基础知识之内部指令

    1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一 ...

  7. 0807 创建vue实例以及vue的基础指令

    lession1 1.Vue的了解   渐进式框架   作者:尤雨溪     mvvm 2.创建vue实例 引入<script src="vue.js"><scr ...

  8. Vue.js介绍

    http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思 ...

  9. Vue.js学习（常用指令）

    Vue.js的指令是以v-开头,它们用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性. 本文参考:htt ...

随机推荐

  1. css文字上下居中，一行文字居中，两行或多行文字同样居中

    附图: 1. 利用Flex布局实现 demo.html <div class="demo demo-flex"><span>孤云将野鹤,岂向人间住.莫买沃洲 ...

  2. oracle xe 创建表空间

    使用OracleXE控制台,我们会发现一个奇怪的现象:没有提供创建表空间.增加数据文件等功能.这似乎和我们使用Oracle标准版控制台不一样. 其实在OracleXE中可以创建新的表空间,不过一般情况 ...

  3. common lisp 里的几个操作符(2)

    集合 (Set) member 函数 默认使用 eql比较对象,可传入关键字参数 :test,作为比较的函数.关键字参数 :key,指定在每个元素上应用这个函数. > (member 2 '(( ...

  4. mysql InnoDB锁等待的查看及分析

    说明:前面已经了解了InnoDB关于在出现锁等待的时候,会根据参数innodb_lock_wait_timeout的配置,判断是否需要进行timeout的操作,本文档介绍在出现锁等待时候的查看及分析处 ...

  5. Newtonsoft.Json转换强类型DataTable错误：Self referencing loop detected with type ......

    问题,在使用Newtonsoft.Json对强类型的DataTable进行系列化时会出现循环引用错误 解决办法,不要直接系列化强类型的DataTable,改为 JsonConvert.Serializ ...

  6. JQuery实现表格自动增加行，对新行添加事件

    实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...

  7. 实战一个职业技术学校。 by：hack某某

    这是我们的目标,某一技术学院,这是一个注入点 上sqlmap 跑出了管理账号密码 扫后台 没有找到,注入就相当鸡肋了 换换其他思路 dba权限,想到了直接写入 找找路径之类的 找到了,运气相当的好 直 ...

  8. GitHub 设置首页显示 404 There isn't a GitHub Pages site here.

    问题如题! 能使用的必要条件是: 1.创建的仓库 Code 中 必须 有 README.md 文件,内容自定 2.设置模板在仓库中 Settings -->GitHub Pages --> ...

  9. php const常量 不能使用字符串连接符.链接

    class jdpay extends pay { const BASE_URL = "https://mapi.jdpay.com/npp10/"; private $agree ...

  10. MySQL 连接数相关参数设置

    当我们的数据库服务器遇到如下的错误:ERROR: Too many connections 一种可能性就是我们的压力确实很大,需要增加服务器硬件资源或者增加数据库服务器.但是大多数情况下是我们的连接数 ...