乐趣区

关于vue.js:Vue之模板语法

jiezi

Vue

尤雨溪：Vue.js 的创建者
⚫ 2014 年 2 月，Vue.js 正式公布
⚫ 2015 年 10 月 27 日，正式公布 1.0.0
⚫ 2016 年 4 月 27 日，公布 2.0 的预览版本

Vue 的简介

Vue: 渐进式 javascript 框架 

 申明式渲染 ---> 组件零碎 ----> 客户端路由 ----> 集中式状态治理 -----> 我的项目构建

易用：曾经会了 HTML、CSS、JavaScript？即刻浏览指南开始构建利用！

灵便：一直凋敝的生态系统，能够在一个库和一套残缺框架之间自若伸缩。

高效：20kB min+gzip 运行大小，超快虚构 DOM，最省心的优化

Vue 的根本应用

传统开发模式比照

Vue 之 Hello word 细节剖析 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 的根本应用 </title>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
    </div>
</body>
<script src="./vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {msg: 'hello Vue'}
    })
</script>

</html>

实例参数剖析

  • el: 元素的挂载地位（CSS 选择器及 DOM 对象）
  • data: 模型数据（值是一个对象）

差值表达式

  • 将 Vue 的数据填充到 HTML 标签中
  • 反对根本的计算操作

Vue 代码运行原理

Vue 模板语法

前端渲染

把数据填充到 HTML 标签中

前端渲染的语法

  • 应用原生 JS 拼接字符串
  • 应用前端模板引擎
  • 应用 Vue 模板语法

模板语法概览

  • 插值表达式
  • 指令
  • 属性绑定
  • 事件绑定
  • 款式绑定
  • 分支循环构造

指令

指令的实质便是自定义属性，但以 V - 结尾（比方 v -clock）

V-clock

插值表达式存在的问题：’闪动‘, 应用 v -clock 可解决闪动问题

原理：先设置款式进行暗藏，数据中把值替换结束之后，再进行值的显示 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-clock</title>

    <style>
        /* 设置款式进行暗藏 */
        
        [v-v-clock] {display: none;}
    </style>
</head>

<body>
    <div id="app">
        <!-- 增加 v -clock 指令 -->
        <div v-clock>{{msg}}</div>
    </div>
</body>
<script src="./vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {msg: "hello Vue"}
    })
</script>

</html>

Vue 数据绑定的三种形式 

v-text: 填充纯文本  相当于插值表达式而言且没有闪动的问题

v-html: 填充 HTML 片段  存在平安问题

v-pre: 显示原始信息 跳过编译过程


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div v-text='text'></div>
        <div v-html='html'></div>
        <div v-pre>{{pre}}</div>
    </div>
</body>
<script src="./vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "hello Vue",
            text: "v-text",
            html: '<h1>v-html</h1>',
            pre: "v-pre"
        }
    })
</script>

</html>

数据响应式

html5 中的响应式：屏幕尺寸的变动会导致款式的变动

数据的响应式：数据的变动会导致款式的变动。

数据绑定：把数据填充到 HTML 标签中

V-once

v-once: 只编译一次 显示内容之后便不再具备响应式的性能

v-once 的长处：应用 v -once 之后，Vue 便不再进行事件监听，从而可能节俭性能 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V-once</title>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
    </div>
</body>
<script src="vue.min.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{msg:"v-once"}
    })
</script>
</html>

双向数据绑定

v-model

双向数据绑定：表单的内容发生变化时，从而会导致数据的变动，而数据的变动会影响页面的变动 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
        <input type="text" v-model="msg">
    </div>
</body>
<script src="vue.min.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{msg:"hello Vue"}
    })
</script>
</html>

MVVM

  • M(model)
  • V(view)
  • VM(View-model)：实现逻辑性能

Vue 之事件

Vue 之处理事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 之处理事件 </title>
    <style>
        #app {
            width: 800px;
            margin: 200px auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>{{num}}</div>
        <input type="button" value="按钮 ++"  v-on:click="num++" >
        <input type="button" value="按钮 --"  v-on:click="num--">
    </div>
</body>
<script src="./vue.min.js"></script>
<script>
    let vm = new  Vue({
        el:"#app",
        data:{num:'0'}
    })
</script>
</html>

Vue 之事件函数的调用 

methods:Vue 实例中定义方法 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 之事件函数的调用 </title>
</head>
<body>
    <div id="app">
        <div>{{num}}</div>
        <input type="button" value="按钮 ++" v-on:click="handle">
        <input type="button" value="按钮 --" v-on:click="handle2()">
    </div>
</body>
<script src="vue.min.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{num:'0'},
        methods:{handle:function () {this.num++},
            handle2:function () {this.num--}
        }
    })
</script>
</html>

Vue 之事件函数的传递参数

如果间接绑定事件函数的名，默认第一个参数则为事件对象

如果间接调用事件函数，默认最初一个参数为事件对象，事件对象的固定写法为 $event


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 之事件函数的传递参数 </title>
</head>
<body>
    <div id="app">
        <div>{{num}}</div>
        <input type="button" value="按钮 ++" v-on:click="handle1">
        <input type="button" value="按钮——" v-on:click="handle2(20,40,$event)">
    </div>
</body>
<script src="./vue.min.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{num:'0',},
        methods:{handle1:function (event) {
                this.num++
                console.log(event)
                console.log(event.target.value)

            },
            handle2:function (n1,n2,event) {console.log(n1+n2);
                console.log(event.target.value)
            }
        }
    })
</script>
</html>

Vue 之事件修饰符

所谓的事件修饰符，是用来阻止事件的默认行为。

退出移动版