vue学习第一天

1.首先在vue官网下载vue.js。

2.新建文件夹code-->lib,把vue.js放入lib中，使用vscod打开

3.引入vue.js

4.vue命令有 v-text、v-html、v-on、v-bind、v-cloak。

v-text：作用等同于插值表达式，区别在于会完全覆盖原来的数据。

v-html：解释标签

v-bind：vue提供的属性绑定机制，缩写 ：

v-on：vue提供的事件绑定机制，缩写 @

v-cloak：解决闪烁问题

5.vue写法

 （1):新建vue，当vue.js被引入后会自动加载 写法

     var vm = new Vue({

         el:    , //表示控制页面的区域

        data{},//将要渲染的数据

        methods{}//方法区 方法写在这里面

       })

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     [v-click]{
         display: none;
     }
    </style>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!--v-click解决差值表达式闪烁问题-->
     <h1 v-click>{{msg}}</h1>
     <!--v-text和插值表达式作用一样，区别是，插值表达式只是转译当前的数据并不会覆盖旧的数据但是v-text 会覆盖所有-->
     <h2 v-text='msg'></h2>
     <!--v-html会解释标签-->
     <p v-html='msg2'></p>
     <!--v-bind数据双向绑定 等价于：-->
     <input type="button" value="按钮" v-bind:title='mytitle' v-on:click='show'>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'学无止境',
                msg2:'<h1>书山有路勤为径</h1>',
                mytitle:'学海无涯苦作舟'
            },
            methods:{//方法写在methods里面是一个对象 v-on绑定事件比如点击等等
             show:function() {
                 alert('vue')
             }
            }
        })
    </script>
</body>
</html>
posted @ 2020-01-17 16:37  压压  阅读(125)  评论(0)    收藏  举报