vue 学习笔记

时间 2019-11-29

标签 vue 学习笔记繁體版

原文原文链接

探寻vue之美vue

　　前言：以前就据说vue是一个很是厉害的mvvm框架，大大小小的介绍文章看了很多。可是没有系统的学习，今天就来系统的学习一下吧。

不管学习那个库，其阅读官方文档是必不可少的: vue官方网站

　　概述：

　　vue的核心是一个响应的数据绑定系统，它能够让数据与dom保持同步。vue语法精简，实现精致，但对浏览器的支持受限，最低只能支持IE9。浏览器

一.使用：

　Vue的使用很是简单。下载好vue.js文件。在HTML中直接引用便可：框架

<script src="../vue.js"></script>

　　先来一个简单的例子：dom

<body>
    <div id="box">
        <span class="red">{{ name }}</span>
        <span>{{ *name }}</span>    
        {{{ name }}}
        <input type="text" v-model="name">
        <input type="text" v-model="name">
    </div>
    <script src="libs/vue.js"></script>
    <script>
        new Vue({
            el:"#box",
            data:{
                name:"<h1>ZNS</h1>"
            }
        })
    </script>
</body>

vue的{{{ }}}，能够解析字符串mvvm

<div id="box">
    <input type="text" v-model='name' />
    <input type="text" v-model='name' />
 <p>{{{name}}}</p>
</div>
<script src="libs/vue.js"></script>
<script>
    new Vue({
        el:'#box',
        data:{
            name:'<h1>魏明理</h1>'    
        }    
    })
</script>

vue中{{* }}，不可变模板学习

<body>
    <div id="box">
        <span class="red">{{ name }}</span>
        <span>{{*name }}</span>    
        <input type="text" v-model="name">
        <input type="text" v-model="name">
    </div>
    <script src="libs/vue.js"></script>
    <script>
        new Vue({
            el:"#box",
            data:{
                name:"zns"
            }
        })
    </script>
</body>

在Vue中为DOM元素绑定事件，经过v-on指令或事件语法糖 @ 为DOM元素绑定事件。网站

<body>
<div id="box">
    <input type="button" value="点击" v-on:click='fun' />
</div>
<script src="libs/vue.js"></script>
<script>    
    new Vue({
        el:'#box',
        data:{
            name:'<h1>魏明理</h1>'    
        },
        methods:{
            fun:function(){
                alert(1)    
            }    
        }    
    })
</script>

</body>

@mouseover/@mousemove/@mousedown/@keydown//等等还有好多。spa

1. Vue学习笔记
2. 学习笔记：Vue
3. vue学习笔记
4. VUE 学习笔记
5. Vue 学习笔记
6. VUE学习笔记
7. vue学习笔记、
8. 学习笔记-vue
9. vue 学习笔记
10. 【VUE】学习笔记
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 适用于PHP初学者的学习线路和建议