一、vue基础学习篇（初体验）- methods、data、el

最新推荐文章于 2021-12-07 15:44:07 发布

IT_CREATE

最新推荐文章于 2021-12-07 15:44:07 发布

阅读量436

点赞数

分类专栏： Vue学习文章标签： vue vue中methods vue中data vue中el vue学习

本文链接：https://blog.csdn.net/IT_CREATE/article/details/106309600

版权

Vue学习专栏收录该内容

13 篇文章 5 订阅

订阅专栏

码云实时更新学习demo地址：https://gitee.com/dxl96/vuexuexi

VUE基础篇（初体验）

1、vue.js的引入

需要先去官网下载vue.js，然后在我们需要使用的html文件中引入该js文件

<script src="../js/vue.js"></script>

或者cdn引入

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

2、vue.js的使用

2.1、vue对象的创建与数据绑定

创建Vue对象，直接 new Vue() ，在new的时候传入一个待vue解析的对象，这个对象含有一些属性，比如：el（用于挂载要管理的元素），data（定义的数据，最终会替换html中指定的变量值）等等
{{属性名}} 作为值替换，会被传入vue对象中的属性值替换掉，该属性定义在传入对象的data属性中，与花括号中的属性名称一致，解析的时候就会从data中找出相同名称的属性，把该属性的值用来替换{{属性名}}
v-for 是vue标签中指定for循环的标签，标签对应的值的也就是类似python中for循环或者java中foreach的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue demo</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--    {{属性名}} 作为值替换，会被传入vue对象中的属性值替换掉，该属性定义在传入对象的data属性中，
        与花括号中的属性名称一致，解析的时候就会从data中找出相同名称的属性，把该属性的值用来替换{{属性名}}-->
    {{message}}

    <ul>
<!--        v-for是vue标签中指定for循环的标签，标签对应的值的也就是类似python中for循环或者java中foreach的写法-->
        <li v-for="item in lists">{{item}}</li>
    </ul>

</div>
<script>
    //let（变量）/const（常量）
    //编程范式，声明式编程
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素，类似于jquery中$("#"),找到要操作的DOM节点
        data:{ //定义的数据，这些定义的数据，只在el 挂在的元素标签的内部才能使用解析
            message:"你你好啊，兄弟",
            lists:['星际','盗梦','少年'],
        }
    })
</script>
</body>
</html>

效果
在这里插入图片描述

2.2、vue监听事件

vue事件，以 v-on: 开头，指定不同的事件，事件的属性值可以是方法，也可以是代码片段，方法定义在传入vue的对象的methods属性中，vue内部调用data属性中数据对象的属性必须同 this 来指定
@ 是语法糖的一种写法，等价于 v-on: ,为了简写方便，用以替换v-on:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue demo</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">

    <span>当前计数：{{counter}}</span>

<!--    vue事件，以v-on:开头，指定不同的事件，事件的属性值可以是方法，也可以是代码片段-->
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>
    <button v-on:click="add">+2</button>
    <button v-on:click="sub">-2</button>

<!--    @是语法糖的一种写法，等价于v-on:,为了简写方便，用以替换v-on:-->
    <button @click="counter++">@+</button>
    <button @click="counter--">@-</button>
</div>
<script>
    //let（变量）/const（常量）
    //编程范式，声明式编程
    const app = new Vue({
        el:'#app', //用于挂载要管理的元素，类似于jquery中$("#"),找到要操作的DOM节点
        data:{ //定义的数据，这些定义的数据，只在el 挂在的元素标签的内部才能使用解析
            counter:0
        },
        methods:{//定义的方法，这些定义的方法也是只有在el 挂在的元素标签的内部才能使用解析
            add: function () {
                console.log("add被执行")
                /*调用data属性里的数据，必须用this指定，因为vue实例相当于为我们做了一层代理，并不是app.data.counter这种调用方式，
                这种是不能被识别的 */
                this.counter += 2; 
            },
            sub: function () {
                console.log("sub被执行")
                this.counter -= 2;
            }
        }
    })

</script>
</body>
</html>

效果
在这里插入图片描述

IT_CREATE

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
一、vue基础学习篇（初体验）- methods、data、el

VUE基础篇1、vue.js的引入需要先去官网下载vue.js，然后在我们需要使用的html文件中引入该js文件<script src="../js/vue.js"></script>2、vue.js的使用2.1、vue对象的创建与数据绑定创建Vue对象，直接 new Vue() ，在new的时候传入一个待vue解析的对象，这个对象含有一些属性，比如：el（用于挂载要管理的元素），data（定义的数据，最终会替换html中指定的变量值）等等{{属性名}} 作为值替换，
复制链接

扫一扫