2021-03-30

最新推荐文章于 2021-07-14 19:16:59 发布

weixin_44852210

最新推荐文章于 2021-07-14 19:16:59 发布

阅读量25

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44852210/article/details/115316670

版权

Vuex学习day01

学习要点:
1,Vue编程范式是声明式编程,将页面和数据分离,做到数据改变页面也随之改变
2,创建Vue对象传入参数对象
el:用于挂载要管理的元素(将元素交给Vue管理)
data:要渲染的数据
3,let定义变量,const定义常量不能被修改
4,数据渲染用{{message}}模式
5,列表展示用<ui><li v-for="item in movies">{{item}}<ui>形式,movies是定义在data里的数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <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>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="app">
    <h2>{{message}}</h2>
    <h1>{{name}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    //Vue的响应式(数据改变页面自动改变)
    //let(定义变量)/const(定义常量不能修改)
    //Vue编程范式:声明式编程 之前的框架是 命令式编程
    const app = new Vue({
        el: '#app',//用于挂载要管理的元素
        data:{//定义数据
           message:'你好,Vue',
            name:'haohohao'
        }
    })
</script>
</body>
</html>

weixin_44852210

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-03-30

Vuex学习day01学习要点:1,Vue编程范式是声明式编程,将页面和数据分离,做到数据改变页面也随之改变2,创建Vue对象传入参数对象el:用于挂载要管理的元素(将元素交给Vue管理)data:要渲染的数据3,let定义变量,const定义常量不能被修改4,数据渲染用{{message}}模式5,列表展示用{{item}}形式,movies是定义在data里的数组<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫