vue.js 初体验

最新推荐文章于 2023-12-20 16:35:17 发布

wi_tim

最新推荐文章于 2023-12-20 16:35:17 发布

阅读量498

点赞数

分类专栏： vue.js学习笔记

本文链接：https://blog.csdn.net/wi_tim/article/details/70184154

版权

vue.js学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

/*参考来自vue.js中文文档http://cn.vuejs.org/v2/guide/index.html 点击打开链接*/

---------------------------------------------------------------------------------------

本文为作者初学，内用错误欢迎指针，关于vue.js大家可以去官网学习

-------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>vue练习</title>
<script type="text/javascript" src='./vue.js'></script>

</head>
<body>
    <div id="demo">
    {{message}}
    </div>

    <div id="demo2">
    <span v-bind:title='message'>
      悬停鼠标显示通过Vue给的提示

    </span>
    </div>

    <p>{{message}}</p>
    <input type="text" v-bind:value='message' />
    <button v-on:click='onclock'></button>
    </div>

    <div id="demo6">
    <p>表单输入</p>
    <p>{{message}}</p>
    <input type="text" v-model="message">
    </div>

    <div id="demo7">
    <ul>
      <todo-itme v-for='itme in textss' v-bind:todo='itme' ></todo-itme>
    </ul>
    </div>
<script type="text/javascript">
        // 文本值插入
        var demo = new Vue({
        el : '#demo',
        data:{
          message:'hello Vue',
        },
        });
        //绑定demo元素属性
        var demo2 = new Vue({
        el : "#demo2",
        data : {
          message:'页面加载于'+ new Date(),
        }
        });
        // 控制元素显示绑定dom结构到数据
        var demo3 = new Vue({
        el:'#demo3',
        data : {
          seen:true,
        }

        })
        //绑定数组数据渲染一个列表
        var demo4 = new Vue({
        el:'#demo4',
        data:{
          todos:[

           {text:'学习Vue'},
           {text:'xuexi'},
           {text:'vue.js'},
          ]
        }
        })
        // 绑定事件监听器 v-on
        var demo5 = new Vue({
        el : "#demo5",
        data:{
          message: '显示输入内容',

        },
        methods: {
          onclock:function(){
           var texts = document.getElementsByTagName('input')[0].value;
            this.message =texts;
          }
        }
        })
        //表单输入表单输入和应用状态双向绑定
        var demo6 = new Vue({
        el :'#demo6',
        data :{
        message:'hello word!',
        }
        })

        // 组件化应用构建
        Vue.component('todo-itme',{
        props:['todo'],                   //自定义属性
         template:'<li>{{todo.text}}</li>'
        })
        var demo7 = new Vue({
        el:'#demo7',
        data :{
          textss:[
           {text:'haha'},
           {text:'oooo'},
           {text:'laaa'},
          ]
        }
        })
    </script>
</body>
</html>