1、Vue

一、起步

原理：

Vue.js数据驱动的原理在于View层的视图发生改变时，Vue会通过DOM Listeners来监听并改变Model层的数据。
反之，当Model层的数据发生改变时，也会通过Data Bingings来监听并改变View层的展示。从而实现双向数据绑定的功能。 
例如：jQuery通过操作DOM来改变页面的显示，而Vue通过操作数据来实现页面的更新与展示。
这样我们就能很直观的理解数据驱动的意思了。

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，
其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
Vue.js 就是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，
也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性。

申

声明式渲染

<div id="start">
    {{message}}
</div>

var start = new Vue({
        el: "#start",
        data: {
            message: "helloWorld,helloVue!"
        }
    })

el:Vue需要操作的元素节点
data属性:每个 Vue 实例都会代理其 data对象里所有的属性。注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

常用指令介绍

v-cloak：还没有加载完vue.js会出现闪烁问题，这个可以解决

v-text：会覆盖元素中的文本内容

v-html：html 会覆盖元素中的文本内容

v-bind：绑定属性可以简写为 :属性名

v-on：　绑定事件可以简写为 @事件名

<!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>Document</title>
    <style>
        [v-cloak] {
           color:red; 
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
        <p v-cloak>{{msg}}</p>
        <h4 v-text="msg"></h4>
        <!-- 默认 v-text 是没有闪烁问题的  -->
        <!-- v-text 会覆盖元素中原本的内容, 但是插值表达式 只会替换自己的这个占位符， 不会把整个元素的内容清空 -->

        <div>{{msg2}}</div>
        <div v-text="msg2"></div>
        <div v-html="msg2">12345</div>
        
        <!-- v-bind: 是Vue中用于绑定属性的指令 -->
        <!-- <input type="button" value="按钮" v-bind:title="mytitle"> -->
        <!-- 注意： v-bind: 指令可以简写为  :要绑定的属性  -->
        <!-- v-bind 中，可以写合法的JS表达式 -->
        <input type="button" value="按钮" v-bind:title="mytitle + '1233' ">

        <!-- Vue 中提供了 v-on: 事件绑定机制 -->
        <input type="button" value="按钮" v-on:click="show">
    </div>

    <!-- 1.导入Vue的包 -->
    <script src="./lib/vue.js"></script>
    <script>
        var vm =new Vue({
            el:"#app",
            data:{
                msg:"123",
                msg2: "<h1>我是一个大大的h1, 我大，我骄傲</h1>",
                mytitle: "这是一个自定义的title",
            },
            methods:{   //这个 methods 属性中定义了当前Vue实例所有可用的方法
                show: function(){
                    alert("hello")
                }

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

未完待续

一、起步

常用指令介绍

猜你喜欢