从零开始学Vue

最新推荐文章于 2023-05-08 23:05:56 发布

杰仔要努力

最新推荐文章于 2023-05-08 23:05:56 发布

阅读量199

点赞数 1

分类专栏：前端vue js 文章标签： vue.js 前端框架

本文链接：https://blog.csdn.net/qq_27399/article/details/89395269

版权

js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端vue

2 篇文章 0 订阅

订阅专栏

最近用到了Vue所以了解了一下，发现很好用，所以学习一下，在这里呢把学习的过程分享给大家，话不多说直接上代码

<html>
<head>
 <title>vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
 <div id="app">
    {{m}}
 </div>
 <div id="app-2">
    <span v-bind:title="message"> <!--v-bind :这个特性被称为指令，前缀v- 代表他们是vue提供的特殊特性
    他们会在渲染的dom上应用特殊的响应式行为，在这里，该指令的意思是：“将这个元素节点的title特性和vue实例的message属性保持一致”
    -->
        鼠标悬停几秒查看此处动态绑定的提示信息！
    </span>
    <a v-bind:href="lin" style="">点我打开百度</a>
 </div>
 <h2>选择与循环</h2>
 <div id="app-3">
    <p v-if="seen">现在你看到我了</p> <!--绑定选择结构-->

    <!--这个例子演示了我们不只可以把数据绑定到dom文本或特性，还可以绑定到dom结构，
    此外，vue也提供了一个强大的过渡效果，可以在vue插入，更新，移除元素时自动应用过渡效果-->
 </div>
 <div id="app-4">
    <ol>
        <li v-for="todo in todos"> <!--绑定循环结构-->
            <!--v-for 指令可以绑定数组的数据来渲染一个项目列表-->
            <!--次实例 绑定了 数组名为todos的数组来渲染ol项目列表-->
            {{todo.text}}
        </li>
    </ol>
    
 </div>
 <h2>处理用户输入</h2>
 <!--为了让用户和应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过这个事件监听器调用在vue实例中定义的方法-->
 <div id="app-5"> 
     <p>{{message}}</p>
     <button v-on:click="reverseMessage">逆转消息</button><!--这个实例我们使用v-on指令给button绑定了一个单击事件，调
        用vue中定义的reverseMessage方法-->
 </div>
 <!--vue还提供了v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定-->
 <div id="app-6">
    <p>{{message}}</p>
    <input v-model="message">
 </div>
 <script>

    var app=new Vue({
    el:'#app', //id名
    data:{
        m:'页面加载于'+new Date().toLocaleString(),
        

    }
    
    });
    app.m='hello vue!'//当app.m与元素的文本绑定时，我们可以通过改变app.m这个变量的值来改变元素的

    var app2=new Vue({
        el:"#app-2",
        data:{
            message:'页面加载于'+new Date().toLocaleString(),
            lin:'http://www.baidu.com'
        }
    })
    app2.message='你好' //当app2.message与元素的title特性绑定时，我们可以通过改变app2.message的值来改变元素的title特性的值
    
    var app3=new Vue({
        el:"#app-3",
        data:{
            seen:true //seen=true 时，元素展示在页面上，为false时在页面上隐藏
        }
    })
     app3.seen=false //当app3.seen与元素的if结构绑定时，我们可以通过改变app3.seen的值来控制元素的显示和隐藏

     var app4=new Vue({
         el:'#app-4',
         data:{todos:[
             {text:'学习javascript'},
             {text:'学习vue!'},
             {text:'vue适合后学'}
         ]}
     })
     app4.todos.push({text:'新添加的项'}) //向todos数组中添加一个数据，
     //app4.todos与元素的for结构绑定时，我们可以通过向数组中添加元素的方式给html元素ol添加新项

     var app5=new Vue({
         el:'#app-5',
         data:{
             message:'hello vue.js'
         },
         methods:{
             reverseMessage:function(){
                 this.message=this.message.split('').reverse().join('') //在这个方法中我们更新了应用的状态，但没有碰触dom,
                                                                        //所有的dom操作都由vue来处理，我们编写的代码只需要关注逻辑层面
             }
         }
     })

     var app6=new Vue({
         el:"#app-6",
         data:{
             message:'hello vue!'
         }
     })
    </script>
</body>
</html>

希望能给大家提供一些帮助，但其实就是自己的一个学习笔记，如果对大家帮助不大，请多海涵

杰仔要努力

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始学Vue

最近用到了Vue所以了解了一下，发现很好用，所以学习一下，在这里呢把学习的过程分享给大家，话不多说直接上代码<html><head> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>&lt...
复制链接

扫一扫