vue学习(五)基础入门-基础知识(1)-var、let、const及第一个程序

最新推荐文章于 2024-05-06 20:29:21 发布

wuyxinu

最新推荐文章于 2024-05-06 20:29:21 发布

阅读量502

点赞数

分类专栏： Web前端 Vue

本文链接：https://blog.csdn.net/wuyxinu/article/details/102783736

版权

Web前端同时被 2 个专栏收录

47 篇文章 48 订阅

订阅专栏

Vue

40 篇文章 55 订阅

订阅专栏

ES6出来后，建议大家都使用let来定义变量,const来定义常量

var的缺陷有点大

JS语言缺陷

ES6所改良的javascript“缺陷”问题

JavaScript总结：let变量（弥补var的缺陷）

没有块级作用域引起的问题

if的块级作用域问题

let 的块级作用域

第一个作用域保存0 ，第二个保存1.以此类推

ES5中，为了解决这个问题只能使用闭包，因为函数是个一个作用域

const 常量

对象字面量的增强写法

原生JS(JQuery之类的框架也是)的编程范式：命令式编程

Vue 的编程范式：声明式编程

（使数据和界面完全分离）

el：element 元素

vue列表的展示

    <div id="app">
        <h2>{{message}}</h2>
        <h1>{{movies}}</h1>
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>
    <script src='../js/vue.js'></script>
    <script>
         const app = new Vue({
            el:'#app',//用于挂载要管理的元素
            data:{  //定义数据
                message: '你好啊啊',
                movies: ['海王', '星际穿越', '大话西游', '少年派', '盗梦空间']
            }
        })
    </script>

vue小案例-计数器

<body>
    <div id="app">
        <h2>当前计数：{{counter}}</h2>
        <button v-on:click='counter++'>+</button>
        <button v-on:click='counter--'>-</button>
        <button v-on:click='add'>+</button>
        <button v-on:click='sub'>-</button>
        <!-- @click 是 v-on:click 的语法糖, 是它的一种简写-->
    </div>
    <script src='../js/vue.js'></script>
    <script>
        const app = new Vue({
            el: '#app', //用于挂载要管理的元素
            data: { //定义数据
                counter: 0,
            },
            methods:{
                add: function(){
                    console.log("add被执行");
                    this.counter++;
                },
                sub: function(){
                    console.log("sub被执行");
                    this.counter--;
                },
            },
        })
    </script>
</body>