1.Vue的简介

  • Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

  • Vue 只关注视图层， 采用自底向上增量开发的设计。

  • Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

　　官方文档：http://vuejs.org/v2/guide/syntax.html

　　中文文档：https://cn.vuejs.org/v2/guide/syntax.html

2.指令系统介绍

1.下载， 库引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!-- 模板语法插值{{  }} -->
            <h3>{{ msg }}</h3>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
        <script>
            let vm = new Vue({
                el:'#app', // 绑定根元素
                data:{
                    msg:'2019-04-09', // 声明数据属性
                }
            })
        </script>
    </body>
</html>

结果：

2.模板语法介绍

{{ 变量 }}
{{ 1 + 1 }}
{{ 'hello' }}
{{ 函数的调用 }}
{{ 1<2 ? '真':'假'}}

3.v-text&v-html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!-- 模板语法插值{{  }} -->
            <h3>{{ msg }}</h3>
            <!-- v-text 只渲染文本 -->
            <div v-text="myTitle1"></div>
            <!-- v-html 不仅能渲染文本， 还可以渲染标签 -->
            <div v-html="myTitle2"></div>

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
        <script>
            let vm = new Vue({
                el:'#app', // 绑定根元素
                data:{
                    msg:'2019-04-09', // 声明数据属性
                    myTitle1:'<span>2019</span>',
                    myTitle2:'<span>2019</span>',
                },
            })
        </script>
    </body>
</html>

4.v-if&v-show

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box{
                width: 200px;
                height: 200px;
                background-color: red;margin-bottom: 20px;
            }

        </style>
    </head>
    <body>
        <div id="app">
            <div class="box" v-if="isShow"></div>
            <div class="box" v-show="isShow"></div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
        <script>
            let vm = new Vue({
                el:'#app',
                data:{
                    isShow:true,
                }
            })
        </script>
    </body>
</html>

效果图

将isShow改为false

总结：

v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-show：不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

如果需要非常频繁地切换，用v-show，

如果在运行时条件很少改变的情况下，用v-if

5.v-for
v-for遍历数组元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="item in items">
                    {{ item.name }}----{{ item.age }}
                </li>
            </ul>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
        <script>
            let vm = new Vue({
                el:'#app',
                data:{
                    items:[
                        {name:'Jerry', age:20},
                        {name:'Tom', age:20},
                    ]
                }

            })
        </script>
    </body>
</html>

结果：

v-for 还支持一个可选的第二个参数为当前项的索引

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

6.v-bind

v-bind 主要用来绑定标签上的属性
传给v-bind:class一个对象动态地切换clas

<div id="app">
　　<div v-bind:class="{ active: isActive }"></div>
</div>

let vm = new Vue({
    el:'#app',
    data:{
        isActive:true,
    }

})

结果：

7.v-on 事件绑定

<div id="app">
        <button v-on:click='count+=1'>加1</button>
    <h2>{{ count }}</h2>
</div>
let vm = new Vue({
    el:'#app',
    data:{
        count:0,
    }
})

on—click接收一个需要调用的方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
             .box{
                   width: 20px;
                   height: 20px;
                   background-color: red;
               }
        </style>

    </head>
    <body>
        <div id="app">
            <!-- 调用一个方法 -->
            <button v-on:click='handlerClick'>隐藏</button>
            <div class="box" v-show="isHidden">

            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
        <script>
        let vm = new Vue({
            el:'#app',
            data:{
                isHidden : true,
            },
            methods:{ // 方法
                handlerClick(){
                    this.isHidden = false;
                }
            }
        })
        </script>
    </body>
</html>

效果：

8.表单输入绑定v-model，双向的数据绑定

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

</head>
<body>
<form action="" id="form">
    <!--<input type="text" :value="text" @input="inputHandler">-->
    <!--<p>{{ text }}</p>-->
    <input type="text" v-model="text">
    <a href="#">{{ text }}</a>
</form>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#form',
        data:{
            text:'刘'
        },
        methods:{
            inputHandler(e){
                console.log(e.target.value);
                this.text = e.target.value;
            }
        }
    });

</script>

</body>
</html>

效果：

Vue介绍的更多相关文章

  1. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  2. Vue.js是什么，vue介绍

    Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...

  3. vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

    这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...

  4. vue——介绍和使用

    一.vue介绍 vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式的JavaScript框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. ...

  5. Vue学习笔记之Vue介绍

    vue的作者叫尤雨溪,中国人.自认为很牛逼的人物,也是我的崇拜之神. 关于他本人的认知,希望大家读一下这篇关于他的文章,或许你会对语言,技术,产生浓厚的兴趣.https://mp.weixin.qq. ...

  6. Vue介绍以及模板语法-插值

    1.Vue的介绍 Vue是一套用于构建用户界面的渐进式框架. 注意:Vue是一个框架,相对于jq库来说,是由本质的区别的:https://cn.vuejs.org/ Vue不支持IE8及一下版本,因为 ...

  7. 02 Vue介绍与安装，指令系统 v-*、音乐播放器

    VUE文档 https://cn.vuejs.org/v2/guide/ 1.vue的介绍 尤雨溪 1.vue的优点 2.vue的介绍 3.vue的安装 4.声明式渲染 <body> &l ...

  8. Vue小白篇 - Vue介绍

    Vue ?啥是Vue?能干嘛? vue 的介绍 Vue 是一套用于构建用户界面的 渐进式框架 ,与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 前端三大框 ...

  9. Vue 介绍,优点,实例

    一 认识vue 1.什么是vue 以数据驱动的web渐进式框架 三大主流框架: Angular React Vue 设计模式:MVVM 2.vue优点 - 以数据驱动,不直接操作DOM,效率高- 单页 ...

随机推荐

  1. filter 过滤器 禁止浏览器缓存

    public class BrowserNoCacheFilter implements Filter { public void init(FilterConfig filterconfig) th ...

  2. Puppeteer 应用容器化

    Puppeteer 应用容器化 Intro Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库.可以通过Puppeteer的提供的api直接控 ...

  3. 【安富莱专题教程第1期】基于STM32的硬件RGB888接口实现emWin的快速刷新方案，32位色或24

    说明:1. 首先感谢ST终于推出了ARGB格式的emWin库,可谓千呼万唤始出来,使用STM32的硬件RGB888接口刷新图片慢的问题终于得到解决.2. 这个问题由来已久,是之前为我们的STM32-V ...

  4. Java构造方法、成员变量初始化以及静态成员变量初始化三者的先后顺序是什么样的？

    [Java笔试真题]:构造方法.成员变量初始化以及静态成员变量初始化三者的先后顺序是什么样的? [解答]:当类第一次被加载的时候,静态变量会首先初始化,接着编译器会把实例变量初始化为默认值,然后执行构 ...

  5. [Swift]LeetCode109. 有序链表转换二叉搜索树 | Convert Sorted List to Binary Search Tree

    Given a singly linked list where elements are sorted in ascending order, convert it to a height bala ...

  6. [Swift]LeetCode621. 任务调度器 | Task Scheduler

    Given a char array representing tasks CPU need to do. It contains capital letters A to Z where diffe ...

  7. [Swift]LeetCode786. 第 K 个最小的素数分数 | K-th Smallest Prime Fraction

    A sorted list A contains 1, plus some number of primes.  Then, for every p < q in the list, we co ...

  8. 由浅入深的讲述Get和Post的区别

    对于网上对get和post区别的长篇大论,我只想说一些干货其中最重要的是:GET和POST本质上两者没有任何区别.他们都是HTTP协议中的请求方法.底层实现都是基于TCP/IP协议.所谓区别,只是浏览 ...

  9. 跳槽 & 思维导图

    个人博客原文: 跳槽 & 思维导图 今年的冬天有点"冷".给大家来点实在的东西. 不知道大家在跳槽的时候是怎么做的?直接投简历面试?还是准备了一段时间,复习一波知识点后再投 ...

  10. HashMap? ConcurrentHashMap? 相信看完这篇没人能难住你！

    前言 Map 这样的 Key Value 在软件开发中是非常经典的结构,常用于在内存中存放数据. 本篇主要想讨论 ConcurrentHashMap 这样一个并发容器,在正式开始之前我觉得有必要谈谈 ...