<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>「测试游记」</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                msg:'Hello Python'
            }
        })
    </script>
</body>
</html>

<script>
    // Vue实例创建,会控制id为app元素中的所有内容
    // Vue的实例 MVVM中的VM
    let vm = new Vue({
        el:'#app', // 控制的区域
        // data代表数据 -> MVVM中的M
        data:{
            msg:'Hello Python'
        }
    })
</script>

<!--MVVM模式中的V-->
<div id="app">
    {{msg}}
</div>

组件化

模块化

以不同的组件，来划分不同的功能模块

复用
高效
解耦

前端工程化，组件化

安装Node.js:http://nodejs.cn/download/

查看版本

$ node -v
$ npm -v # 相当于python中的pip

使用淘宝npm镜像:http://npm.taobao.org/

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue-cli脚手架

# 注意Linux或Mac 可能需要使用sudo -i进入管理员模式
$ cnpm install -g @vue/cli
# -g:全局

创建项目

$ vue create 项目名
# 选择default

$ npm run serve # 开启项目

node_modules：系统库

public/：单界面

src ：需要压缩的部分

/src/assets:资源（字体，图片等）

/src/components:组件

main.js：相当于一个main函数，最先加载

// 导入Vue.js
import Vue from 'vue'
// 导入App.vue根组件
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    render: h => h(App), //渲染App根组件
}).$mount('#app')

App.vue:

<!--template用于展示给用户，相当于MVVM中的V-->
<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <!--在父组件中给子组件传值-->
        <HelloWorld msg="Welcome to Your Vue.js App"/>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'

    export default {
        // 定义组件名称
        name: 'app',
        components: { //声明子组件
            HelloWorld
        }
    }
</script>

/src/components/HelloWorld.vue被当作子组件传入

修改 App.vue， <HelloWorldmsg="「测试游记」"/>把msg传入

HelloWorld.vue

<!--template用于展示给用户，相当于MVVM中的V-->
<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <!--在父组件中给子组件传值-->
        <HelloWorld msg="「测试游记」"/>
    </div>
</template>

修改 HelloWorld.vue中的内容

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
    </div>
</template>

查看页面

HelloWorld组件里面的msg内容改变的原因：

<script>
    export default {
        name: 'HelloWorld',
        props: { //从父组件获取msg
            msg: String
        }
    }
</script>

创建一个组件

在 /src/components新建一个 greeting.vue

<template>

</template>

<script>
    export default {
        name: "greeting"
    }
</script>

<style scoped>

</style>

填充

<template>
    <div class="msg">
        插值表达式：
        <p>{{message}}</p>
    </div>
</template>

<script>
    export default {
        name: "greeting",
        // {} -> 对象
        data() {
            return {
                message: 'Hello Python'
            }
        }
    }
</script>

<style scoped>

</style>

在 App.vue里面声明

<script>
    import HelloWorld from './components/HelloWorld.vue'
    import greeting from './components/greeting.vue'

    export default {
        // 定义组件名称
        name: 'app',
        components: { //声明子组件
            HelloWorld,
            greeting
        }
    }
</script>

import greeting from './components/greeting.vue'
components: { //声明子组件
            HelloWorld,
            greeting
        }

修改颜色

<style scoped>
    .msg p {
        color: red;
    }
</style>

测试开发

测试开发进阶(十六)

后续部分

到底什么是测试开发

测试开发平台是产品吗

测试开发的价值，理念

测试开发课程到底学什么？

Vue框架

MVVM模式

Vue-demo

组件化

前端工程化，组件化

安装vue-cli脚手架

创建项目

创建一个组件

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐