第一个vue程序（Vue学习笔记）

最新推荐文章于 2024-07-06 20:33:25 发布

晴空_V9

最新推荐文章于 2024-07-06 20:33:25 发布

阅读量487

点赞数 1

本文链接：https://blog.csdn.net/m0_55972160/article/details/119893730

版权

这里使用官方文档的cdn

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

1、编写一个html，第一个vue程序

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

</head>
<body>
<!--view层   模板-->
<div id="app">
    {{message}}
</div>

<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el:"#app",
        //model：数据
        data:{
            message:"hello,vue"
        }
    });

</script>

</body>
</html>

注意视图模板和数据，

View视图

Model模型

ViewModel：双向绑定就是你们前端数据改变你们data中的数据也会改变

可以在页面不刷新的情况下改变数据然后同步到前端显示

判断循环

事件

学习vue我们必须之到它的7个属性，8个方法，以及7个指令。787原则

el属性
- 用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性
- 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性
- 用来设置模板，会替换页面元素，包括占位符。
methods属性
- 放置页面中的业务逻辑，js方法一般都放置在methods中
render属性
- 创建真正的Virtual Dom
computed属性
- 用来计算
watch属性
- watch:function(new,old){}
- 监听data中数据的变化
- 两个参数，一个返回新值，一个返回旧值，

晴空_V9

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
第一个vue程序（Vue学习笔记）

这里使用官方文档的cdn<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>1、编写一个html，第一个vue程序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>&lt...
复制链接

扫一扫