乐趣区

关于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之事件修饰符

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章