vue--先决篇

时间 2019-11-07

标签 vue 先决繁體版

原文原文链接

1、vue介绍：

  vue是一个渐进式Javascript框架。

　渐进式：即有一个核心库，在须要的时候，在逐渐添加插件的一种概念。

　　（1）MVVM和MVC模式：

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是链接view和model的桥梁。
它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，咱们称之为数据的双向绑定。
总结：在MVVM的框架下视图和模型是不能直接通讯的。它们经过ViewModel来通讯，ViewModel一般要实现一个observer观察者，
当数据发生变化，ViewModel可以监听到数据的这种变化，而后通知到对应的视图作自动更新，
而当用户操做视图，ViewModel也能监听到视图的变化，而后通知数据作改动，这实际上就实现了数据的双向绑定。而且MVVM中的View 和 ViewModel能够互相通讯。

　　　　　　　　　　　　　　　　　　MVVM实现原理图解html

 MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思同样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。
‘MVC是单向通讯。也就是View跟Model，必须经过Controller来承上启下。MVC和MVVM的区别并非VM彻底取代了C，ViewModel存在目的在于抽离Controller中展现的业务逻辑

2、特色：

    易用、

　　灵活--不断繁荣的生态系统，能够在一个库和一套完整框架之间自如伸缩。

　　高效--20KB min+gzip运行大小，超快的虚拟DOM，最省心的优化。

3、使用：

　　a: 直接使用script标签引入；vue将会被注册成一个全局变量，在开发环境下不要使用压缩版本，

　　　否则你就失去了全部常见错误相关的警告!

　　b: 文本的插入，使用差值表达式插入，Vue中差值表达式，既能够插入任何数据，也能够插入算数运算符；{{ }}

4、指令

　　a: v-for （循环）

固然还能够遍历下标： <li v-for="(item，index) in attr">{{item}}--{{index}}</li> vue

　　b: v-bind （绑定元素）

　　c: v-on （事件）

　　d:事件对象（$event）

　　（1）传e后端

<body>
    <div id="app">
        <button @click='fn'>点击</button>  //fn 不传递任何参数，
    </div>
    <script src="./vue.js"></script>
    <script>
    let app=new Vue({
        el:'#app',
        data:{

        },
        methods:{
            fn(e){
                console.log(e)   //MouseEvent {isTrusted: true, screenX: 33, screenY: 124, clientX: 33, clientY: 22, …}  打印事件对象！
            }
        }
    })
    </script>

　　（2）实参传入数值，形参传入e浏览器

  <div id="app">
        <button @click='fn(12,13)'>点击</button>
    </div>
    <script src="./vue.js"></script>
    <script>
    let app=new Vue({
        el:'#app',
        data:{

        },
        methods:{
            fn(e,b){
                console.log(e,b)   //12,13
            }
        }
    })
    </script>

　　（3）实参为数值和 $event ------$event 表明事件对象，多个参数；app

 <div id="app">
        <button @click='fn(12,13,$event)'>点击</button>
    </div>
    <script src="./vue.js"></script>
    <script>
    let app=new Vue({
        el:'#app',
        data:{

        },
        methods:{
            fn(a,b,e){
                console.log(a,b,e)   //12 13 MouseEvent {isTrusted: true, screenX: 36, screenY: 128, clientX: 36, clientY: 25, …}
            }
        }
    })
    </script>

　　e: v-if /v-else-if /v-else （判断）

  <div id="app">
        <div v-if='onOff'>真的我是</div>
        <div v-if='onOff'>我是不真不假</div>  //等同于v-if-else；
        <div v-else>假的我是</div>
    </div>

    <script src="./vue.js"></script>
    <script>
        let app=new Vue({
            el:'#app',
            data:{
                onOff:true,  //若是改为false，显示假的是我
            },
        })
    </script>

　　f: v-show / v-hide (显示和隐藏) 相似于原生的display：block /none；

<div id="app">
        <div v-if='onOff'>真的我是</div>
        <div v-else>假的我是</div>

            <!-- v-show和v-hide -->
        <div v-show='onOff'>我是show</div>
        <div v-show='!onOff'>我隐藏了</div>
    </div>

    <script src="./vue.js"></script>
    <script>
        let app=new Vue({
            el:'#app',
            data:{
                onOff:true,  //若是改为false，显示假的是我
            },
        })
    </script>

区别于v-if和v-else ；框架

能够清晰的看出，v-show和v-hide只是隐藏了当前的元素显示，而v-if和v-else直接否认了元素的加载！mvvm

　　g: v-model（双向数据绑定）----MVVM的一种语法糖

<body>
    <div id="app">
        <input type="text" v-model='num'>
        <p>{{num}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
    let app=new Vue({
        el:'#app',
        data:{
            num:0,
        }
    })
    </script>

当input的value发生变化时，p里面的值也会随之发生变化。

　　h:事件冒泡

<body>
    <div id="app">
        <div @click='fn1'>
            <button @click='fn'>点你妹啊</button>   //是嵌套关系哦
        </div>

    </div>
    <script src="./vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: '你妹的',
            },
            methods: {
                fn() {
                    alert('你妹妹的')
                },
                fn1() {
                    alert('果真能够冒泡')
                }
            }
        })
    </script>

　　i: 阻止事件冒泡------（.stop修饰符）

<body>
    <div id="app">
        <div @click='fn1'>
            <button @click.stop='fn'>点你妹啊</button>   //只需加  .stop  修饰符便可
        </div>

    </div>
    <script src="./vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: '你妹的',
            },
            methods: {
                fn() {
                    alert('你妹妹的')
                },
                fn1() {
                    alert('果真能够冒泡')
                }
            }
        })
    </script>

　　g:阻止浏览器以及form表单的默认行为（.prevent修饰符）

<body>
    <div id="app">
        <form action="./index.html" method="GET">
        <input @click.prevent='submit' type="submit" value="提交">  //只需加 .prevent 修饰符便可
        </form>

    </div>
    <script src="./vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: '你妹的',
            },
            methods: {
               submit(){
                   alert('要想过此路，留下买路财')
               }
            }
        })
    </script>

vue--先决篇

1、vue介绍：

（1）MVVM和MVC模式：

2、特色：

3、使用：

a: 直接使用script标签引入；vue将会被注册成一个全局变量，在开发环境下不要使用压缩版本，

否则你就失去了全部常见错误相关的警告!

b: 文本的插入，使用差值表达式插入，Vue中差值表达式，既能够插入任何数据，也能够插入算数运算符；{{ }}

4、指令

a: v-for （循环）

b: v-bind （绑定元素）

c: v-on （事件）

d:事件对象（$event）

e: v-if /v-else-if /v-else （判断）

f: v-show / v-hide (显示和隐藏) 相似于原生的display：block /none；

g: v-model（双向数据绑定）----MVVM的一种语法糖

h:事件冒泡

i: 阻止事件冒泡------（.stop修饰符）

g:阻止浏览器以及form表单的默认行为 （.prevent修饰符）

　　（1）MVVM和MVC模式：

　　a: 直接使用script标签引入；vue将会被注册成一个全局变量，在开发环境下不要使用压缩版本，

　　　否则你就失去了全部常见错误相关的警告!

　　b: 文本的插入，使用差值表达式插入，Vue中差值表达式，既能够插入任何数据，也能够插入算数运算符；{{ }}

　　a: v-for （循环）

　　b: v-bind （绑定元素）

　　c: v-on （事件）

　　d:事件对象（$event）

　　e: v-if /v-else-if /v-else （判断）

　　f: v-show / v-hide (显示和隐藏) 相似于原生的display：block /none；

　　g: v-model（双向数据绑定）----MVVM的一种语法糖

　　h:事件冒泡

　　i: 阻止事件冒泡------（.stop修饰符）

　　g:阻止浏览器以及form表单的默认行为（.prevent修饰符）