• 谷粒商城学习——P36Vue介绍与HelloWord


    @Vue官网

    MVVM模型

    M:model 包括数据和一些基本操作

    V:view 视图,页面渲染结果

    VM:View-model,模型与视图间的双向操作(无需开发人员干涉)

    视图和数据通过VM绑定起来,model里有变化会自动地通过Directives填写到视view中,视图表单中添加了内容也会自动地通过DOM Listeners保存到模型中。

    Vue做了很好的实现了VM

    简单使用:

    初始化项目

    在上个项目test下命令窗口执行

    cnpm init -y

    cnpm 初始化当前项目,-y表示确定。初始化完成后,项目下会生成package.json.代表当前项目已被npm管理。

      用cnpm是安装的淘宝镜像,比npm快,相当于用maven配阿里云镜像仓库一样。想用可参考我之前的笔记:vue环境搭建

    安装vue依赖

    cnpm install vue

    安装完成后,会生成node_modules文件夹,里面是自动下载的各种插件依赖

    编辑测试代码

    新建index.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <h1> {{name}} ,非常帅</h1>
            </div>
    
            <script src="./node_modules/vue/dist/vue.js"></script>
            <script>
                //1、vue声明式渲染
                let vm = new Vue({ //生成vue对象
                    el: "#app", //绑定元素 div id="app" // 可以指定恰标签,但是不可以指定body标签
                    data: { //封装数据
                        name: "张三", // 也可以使用{} //表单中可以取出
                        num: 1
                    },
                });
            </script>
        </body>
    </html>

    HBuilder的话运行到chrome

     运行效果:

  • 相关阅读:
    SQL_Server_2005_字符串函数(描述及实例)
    固定在左右两侧不动的广告条 样式
    jquery 浏览器判断
    sqlserver 2005无限极分类 获取 所有子分类
    asp.net使用treeview控件,递归加载
    C++day15 学习笔记
    Win32编程day02 学习笔记
    Win32编程day04 学习笔记
    C++day16 学习笔记
    Win32编程day05 学习笔记
  • 原文地址:https://www.cnblogs.com/yanan7890/p/14873387.html
Copyright © 2020-2023  润新知