学习笔记编写Vue的第一个程序

6F790387-D1EB-2512-E6EA-3DD86E1655BD.png

这里使用官方文档的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中的数据也会改变

5EB6AEB8-82AB-8103-8B8A-3B2AC5BECD53.png

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

876892F9-DC64-9D15-4794-4A03140E4C36.png

05A691AC-A888-BD27-8241-BDF363FCB352.png

判断循环

  • if
  • for 

事件

  • on
  •  

学习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中数据的变化

    • 两个参数,一个返回新值,一个返回旧值,

收藏 (0)
评论列表
正在载入评论列表...
我是有底线的
为您推荐
    暂时没有数据