VUE学习笔记（Vue指令及实例）

最新推荐文章于 2024-06-14 11:01:38 发布
最新推荐文章于 2024-06-14 11:01:38 发布
阅读量84 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/182303/blog/1186826
版权

1、v-bind：可以将数据绑定到html标签属性的vue指令。默认数据只绑定到标签内容区，如果想绑定到属性即用v-bind指令（见示例），v-bind有简写方式：即将v-bind:title可简写为在属性前直接加冒号为:title。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
</div>
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        }
    });

    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date()
        }
    })
</script>

2、v-on指令,绑定事件指令。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
      <p>{{message}}</p>
      <button v-on:click="update">
          reverse message
      </button>
  </div>

</body>
</html>
<script>
    var app=new Vue({
       el:"#app",
        data:{
            message:"hello vue"
        },
        methods:{
            update:function(){
                this.message=this.message
                        .split("").reverse().join("");
            }
        }
    });
</script>

3、v-if指令，可将文本，结构绑定到DOM结构中。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
   <p id="vIf" v-if="seen">
       v-if指令为true
     <a href=""> 点我也没用！哈哈哈</a>
   </p>
</body>
</html>
<script>
    var app2 = new Vue({
        el: '#vIf',
        data: {
            seen: false
        }
    })
</script>

4、v-for指令

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
   <div>
       <ul id="vFor">
           <li v-for="person in persons">
               Person: 姓名:{{person.name}},性别：{{person.sex}}
               <div> <span>Name：</span> <input type="text" :value="person.name"></div>
               <div> <span>Sex：</span> <input type="text" :value="person.sex"></div>
           </li>
       </ul>
   </div>
</body>
<style>
    *{
        font-size: 28px;
    }
    li{
        list-style: none;
        margin:2rem;
    }
    div{
        margin:1rem;
    }
    span{
        display:inline-block;
        width: 80px;
    }
    input{
        text-align: center;
        width:200px;
    }
</style>
</html>
<script>
    var app = new Vue({
        el: '#vFor',
        data: {
            persons: [
                {name:"helen",
                    sex:"female"
                },
                {name:"David",
                    sex:"male"
                },
            ]
        }
    })
</script>

控制台输入：app.persons.push({name:"Mary",sex:"female"});执行后界面多了一列。通过控制台可改变数据。

110152_wpDT_182303.png

5、v-model指令：针对与用户交互的组件双向绑定。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div>
    <ul id="vFor">
        <li v-for="person in persons">
            Person: 姓名:<span>{{person.name}}</span>  性别：<span>{{person.sex}}</span>
            <div> <span>Name：</span> <input v-model="person.name"></div>
            <div> <span>Sex：</span> <input v-model="person.sex"></div>
        </li>
    </ul>
</div>
</body>
<style>
    *{
        font-size: 28px;
    }
    li{
        list-style: none;
        margin:2rem;
    }
    div{
        margin:1rem;

    }
    span{
        display:inline-block;
        width: 80px;
    }
    input{

        text-align: center;
        width:200px;
    }
</style>
</html>
<script>
    var app = new Vue({
        el: '#vFor',
        data: {
            persons: [
                {name:"helen",
                    sex:"female"
                },
                {name:"David",
                    sex:"male"
                },
            ]
        }
    })
</script>

6、template注册使用（看官网教程写得简单了，没运行出来。原来在Vue里，一个组件就是预定义的一个Vue实例，即要在Vue实例中使用）。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>

    <ul id="app">
        <!-- Create an instance of the todo-item component -->
        <todo-item> dd</todo-item>
    </ul>
</body>
</html>
<script>
    Vue.component('todo-item',
            {  template: '<li>This is a todo</li>'})
    var vue=new Vue({
        el:"#app"
    });
</script>

7、template可修改文本。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://unpkg.com/vue"></script>
</head>
<body>
   <ul id="app">
       <mydiv v-for="child in children"  v-bind:item="child"></mydiv>
   </ul>
</body>
</html>
<script>
    Vue.component('mydiv',{
        props:['item'],
        template:'<p> {{item.name}} </p>'});
    var vue=new Vue({
                el: "#app",
                data:{
                    children:[
                        {name:"helen"},
                        {name:"David"},
                        {name:"HanMeimei"}
                    ]}});
</script>

与自定义元素的关系

你可能已经注意到 Vue.js 组件非常类似于自定义元素——它是 Web 组件规范的一部分。实际上 Vue.js 的组件语法参考了该规范。例如 Vue 组件实现了 Slot API 与 is 特性。但是，有几个关键的不同：

    1. Web 组件规范仍然远未完成，并且没有浏览器实现。相比之下，Vue.js 组件不需要任何补丁，并且在所有支持的浏览器（IE9 及更高版本）之下表现一致。必要时，Vue.js 组件也可以放在原生自定义元素之内。

    2. Vue.js 组件提供了原生自定义元素所不具备的一些重要功能，比如组件间的数据流，自定义事件系统，以及动态的、带特效的组件替换。

转载于:https://my.oschina.net/u/182303/blog/1186826

chugu5734
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 学习笔记
weixin_43971312的博客
05-22 2155
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
vue学习笔记（超详细）
jiey0407的博客
03-09 5302
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用 值绑定 修饰符 检测数组更新 计算属性 computed 计算属性setter和getter computed / meth
Vue学习笔记（尚硅谷天禹老师）
weixin_43123984的博客
11-15 702
总结：Vue中有2种数据绑定的方式：备注： 总结：el有2种写法：data有2种写法：如何选择：目前哪种写法都可以，以后学到组件时，，否则会报错 MVVM模型： 总结：使用计算属性： 使用监听属性： 总结：和之间的区别：两个重要的小原则： 1.9 key的作用与原理 面试题： 、中的key有什么作用？（key的内部原理）虚拟DOM中key的作用：key是虚拟DOM中，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
Vue学习笔记(黑马前端)
JayChouyyds589的博客
10-02 3080
黑马前端Vue学习笔记(未学完)
Vue学习笔记
weixin_44277207的博客
07-27 584
Vue学习笔记
vue学习笔记（vue核心知识）
maohe的博客
01-22 2179
记录Vue学习过程笔记和知识点（更新中）。
Vue 3 学习笔记
qq_46735055的博客
05-23 1098
禹神最新Vue3教程学习笔记
vue学习笔记（学习中）
2302_76718743的博客
02-26 848
一套用于构建用户界面的渐进式JavaScript框架。
vue3 学习笔记 (三)——vue3 自定义指令
2301_82243539的博客
04-20 604
在组件内部，使用 directives 引入的叫做局部自定义指令。Vue2 和 Vue3 的自定义指令引入是一模一样的。实例3：局部自定义指令二、自定义指令中的生命周期钩子函数一个指令定义对象可以提供如下几个钩子函数（都是可选的，根据需要引入）created ：绑定元素属性或事件监听器被应用之前调用。该指令需要附加需要在普通的 v-on 事件监听器前调用的事件监听器时，这很有用。beforeMounted ：当指令第一次绑定到元素并且在挂载父组件之前执行。
Vue3 学习笔记
weixin_52253964的博客
10-29 847
Vue3 学习笔记
vue学习笔记之作用域插槽实例分析
12-28
本文实例讲述了vue学习笔记之作用域插槽。分享给大家供大家参考，具体如下： <child></child> Vue.component('child', { data: function () { return { list: [1, 2, 3] } }, template: ' ...
vue学习笔记之slot插槽用法实例分析
01-19
本文实例讲述了vue slot插槽用法。分享给大家供大家参考，具体如下： 不使用插槽，在template中用v-html解析父组件传来的带有标签的content <!DOCTYPE html> <html lang=en> <head> <meta ...
vue学习笔记之slot插槽基本用法实例分析
12-28
本文实例讲述了vue学习笔记之slot插槽基本用法。分享给大家供大家参考，具体如下： 不使用插槽，在template中用v-html解析父组件传来的带有标签的content <!DOCTYPE html> <html lang=en> <head> &...
vue学习笔记之过滤器的基本使用方法实例分析
11-21
本文实例讲述了vue学习笔记之过滤器的基本使用方法。分享给大家供大家参考，具体如下： 以下是一个将浏览器默认时间格式格式化的例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset...
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用，而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 564
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1436
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
最新发布
zhangwenok的博客
06-14 1270
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 1062
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值