• Vue框架实例成员及项目搭建

    文章目录

    Vue框架实例成员及项目搭建

    Vue实例成员

    前三个前面的博客已经写道，没有细分，现在前三个顺便做一下简单归类

    一、el：实例

    new Vue({
    el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容

    二、data：数据

    <div id='app'>
    {{ msg }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: '数据',
        }
    })
    console.log(app.$data.msg);
    console.log(app.msg);
</script>
<!-- data为插件表达式中的变量提供数据 -->
<!-- data中的数据可以通过Vue实例直接或间接访问-->

    三、methods：方法

    <style>
    .box { background-color: orange }
</style>
<div id='app'>
    <p class="box" v-on:click="pClick">测试</p>
    <p class="box" v-on:mouseover="pOver">测试</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            pClick () {
                // 点击测试
            },
            pOver () {
                // 悬浮测试
            }
        }
    })
</script>
<!-- 了解v-on:为事件绑定的指令 -->
<!-- methods为事件提供实现体-->

    四、computed：计算

    1. 其实就是vue中的方法属性，方法名可以作为属性来使用，属性值为方法的返回值

    2. 再computed中声明的方法属性，不能在data中重复声明，比data中声明的属性要多出写逻辑的地方

      重复声明

    3. 方法属性，自带监听机制，在方法属性中出现变量，都会被监听，一旦有任何监听的变量值发生更新，方法属性都会被调用更新方法属性的值

    4. 方法属性一定要在页面中渲染一次，方法属性采用意义，多次渲染，方法属性只会调用一次

    案例：计算机（第一个输入框加第二个输入框等于第三个输入框）

    <body>
    <div id="app">
        <!-- type="number"表示只能写数字 -->
        <input type="number" v-model="num1" max="100" min="0">
        +
        <input type="number" v-model="num2" max="100" min="0">
        =
        <button>{{ sum }}</button>
    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            // sum: '',  // 重复声明
            num1: '',
            num2: '',
        },
        computed: {
            sum () {
                // num1和num2都在该方法属性中，所以有一个更新值，该方法都会被调用
                if (this.num1 && this.num2) {
                    return +this.num1 + +this.num2;  // +this.num1是将字符串快速转换澄数字
                }
                return '结果';
            }
        }
    })
</script>

    方法属性的应用场景：一个变量依赖于多个变量，且需要进行一定的逻辑运算

    五、watch：监听

    1. watch中不定义属性，只是监听属性，所以方法的返回值没有任何意义，只是监听变量值是否发生更新
    2. watch中的方法名，就是被监听的属性（方法名同被监听属性名）
    3. 被监听的变量值一旦发生更新，监听方法就会被调用

    应用场景：

    1. k线图：股票数据变化，页面的k线图重新渲染（需要逻辑将数据转换为图形）
    2. 拆分姓名：录入姓名，拆分为姓和名（需要逻辑将一个数据拆分为多个数据）
    <body>
    <div id="app">
        姓名：<input type="text" v-model="full_name">
        <hr>
        姓：<button>{{ first_name }}</button>
        名：<button>{{ last_name }}</button>
    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '未知',
            last_name: '未知'
        },
        watch: {
            full_name () {
                if (this.full_name) {
                    this.first_name = this.full_name.split('')[0];
                    this.last_name = this.full_name.split('')[1];
                } else {
                    this.first_name = '未知';
                    this.last_name = '未知';
                }
            }
        }
    })
</script>

    Vue项目环境

    python：c语言编写，解释执行python语言的

    node：c++语言编写，解释执行JacaScript语言的

    npm类似于pip，是为node环境安装额外功能的

    项目安装

    • 安装node

      官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

    • 安装cnpm换源

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

豆瓣：http://pypi.douban.com/simple/（推荐）
清华：http://pypi.tuna.tsinghua.edu.cn/simple

    • 安装脚手架

      cnpm install -g @vue/cli

    • 清除缓存

      npm cache clean --force

    注：切记啊，前两步出错一定要清除缓存再重新执行，不然后面创建项目出什么错你都不知道ps:我曾经被这个缓存耽误了两个小时，就为了创建能执行的项目

    项目创建

    一、创建项目

    vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目，选取Router, Vuex插件
//从C盘换到D盘终端敲  D:

    选择自定义安装环境

    三个插件的作用：

    Babel：将ES6语法解析为ES5语法给浏览器

    Router：前台路由

    Vuex：前台仓库，相当于单例，完成个组件间传参的

    以上是主要步骤，其他一些简单步骤可根据提示填写

    二、cmd启动/停止项目

    npm run serve / ctrl+c
// 要提前进入项目根目录

    三、打包项目

    npm run build
// 要在项目根目录下进行打包操作

    项目移植

    vue目录在下方会有详细介绍

    打开vue文件案件，红色的文件一定不能要，发送和下载非常慢，因为里面包含几万个小文件，即使是删除也会耗费一定的时间。

    三个蓝色文件一定要拷贝，其他的文件看心情拷贝。因为package.json里面（第二张图）会根据环境配置其他相关的文件，补齐这些文件需要cmd进入拷贝的（三个文件）项目文件夹；执行cnpm install会将依赖于这个项目的文件补齐。

    package

    vue项目开发

    pycharm配置并启动vue项目

    1. 用pycharm开发项目
    2. 添加配置npm启动

    没有配置的项目框内会显示其他的并且启动按钮是灰色的（有些版本pycharm在右上角），点击进入第二张图

    点击加号，选择npm，name可选择性重命名，node和package为安装的程序目录和安装程序的npm文件夹

    vue项目目录结构分析

    ├── v-proj
|	├── node_modules  	// 当前项目所有依赖，一般不可以移植给其他电脑环境
|	├── public			
|	|	├── favicon.ico	// 标签图标
|	|	└── index.html	// 当前项目唯一的页面
|	├── src
|	|	├── assets		// 静态资源img、css、js
|	|	├── components	// 小组件
|	|	├── views		// 页面组件
|	|	├── App.vue		// 根组件
|	|	├── main.js		// 全局脚本文件（项目的入口）
|	|	├── router
|	|	|	└── index.js// 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
|	|	└── store	
|	|	|	└── index.js// 仓库脚本文件（vuex插件的配置文件，数据仓库）
|	├── README.md
└	└── package.json等配置文件

    vue组件

    注：pycharm安装vue.js插件，就可以高亮显示vue文件了（和安装模块一样）

    1. 一个.vue文件就是一个组件

    2. 组件都是由三部分组成：html结构、js逻辑、css样式，

      html结构都是在template标签中，页面结构有且只有一个根标签（template一级结构下）

      js逻辑都是在script标签中，必须设置导出，export default{…}

      css样式都是在style标签中，必须设置scoped属性，是样式组件化

    <template>
    <div class="first-cp">
         <h1>第一个组件</h1>
    </div>
</template>

<script>
    // .vue文件类似于模块，可以直接相互导入，所以在组件内部要设置导出
    export default {

    }
</script>

<style scoped>
    /* scoped可以使样式组件化，只在自己内部起作用 */

</style>

    全局脚本文件main.js（项目入口）

    1. main.js是项目的入口文件
    2. new Vue()就是创建根组件，用render读取一个.Vue文件，$mount渲染替换index,html中的占位
    3. 项目所依赖的环境，比如：vue环境、路由环境、仓库环境、第三方环境，自定义环境都是在main.js中完成
    import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

    页面中网页在没有刷新的情况下实现切换，其实只是$mount渲染替换index,html中的占位。切换不同的html页面而已。

    路由配置

    1. 当用户在浏览器中访问路由是 / , router插件就会被加载 Home.vue文件，同理 /about 就是 About.vue文件
    2. 当加载的 Home.vue文件 或者 About.vue文件，去替换App.vue文件中 <router-view / > 占位符
    3. 用redirect配置来实现路由的重定向

    App.vue根组件

    1. App.vue是项目的根组件，是唯一由main.js加载渲染的组件，就是替换index.html页面中的
      的占位标签
    2. 实际开发中App.vue文件中，只需要书写下方五行代码即可（可以额外增加其他代码）
    3. router-view是一个占位标签，由router插件控制，可以在router的配置文件中进行配置
    4. router-view就是根据router在index.js中配置的路由关系被 指定路径 匹配 指定页面组件 渲染
      router-view或被不同的页面组件替换，就形成了页面跳转

    组件导入

    父组件加载子组件：父组件通常是页面组件，是被一个个小组件这些子组件组装成的页面
    1. 导入语法要在 export default{} 之上完成
    2. @符合标识 项目src文件夹 绝对路径
    3. 要在export default{} 的括号中用 components 注册
    4. 在该组件的模板中就可以渲染子组件了(html代码中是区别大小写的)

    router-link标签跳转页面

    router控制的路由，不是用a标签完成跳转：

    1. a标签会刷新页面，错误的
    2. router-link标签也能完成跳转，且不会刷新页面，就是router提供的a标签(最终会被解析为a标签，还是用a来控制样式)
    3. router-link标签的to属性控制跳转路径，由两种方式
      i) to=“路径字符串”
      ii :to="{name: ‘路由名’}"

    补充

    字符串补充

    注：开发vue项目，在网页实现变量和字符串的拼接，反引号可以直接在里面写变量（实现效果相同，方法不同）

    1. 双引号

      "前缀" + 变量 + "后缀"

    2. 单引号

      '前缀' + 变量 + '后缀'

    3. 反引号

      `前缀${变量}后缀`

    效果相同，方法不同

    我把月亮戳到天上 天就是我的 我把脚踩入地里 地就是我的 我亲吻你 你就是我的
  • 相关阅读:
    格式化时间
    鼠标经过,图片放大事件
    reboot 后 Docker服务及容器自动启动设置
    gin 单个文件函数 上传文件到本地目录里
    深度Linux deepin更新，防火墙操作
    第四篇 mybatis的运行原理（1）：重要组件的介绍
    第三篇 常用配置和动态SQL
    第二篇 mybatis的入门
    记一次强转bug
    第一篇 mybatis的简介
  • 原文地址：https://www.cnblogs.com/zhulipeng-1998/p/12863872.html
Copyright © 2020-2023  润新知