码迷,mamicode.com
首页 > 其他好文 > 详细

实例成员:计算属性 监听属性以及vue的项目开发

时间:2020-02-14 01:03:28      阅读:56      评论:0      收藏:0      [点我收藏+]

标签:加载   匹配   template   view   button   案例   访问   range   padding   

6)字符串补充
双引号:
    “前缀” + 变量 + “后缀”
单引号:
    ‘前缀’ + 变量 + ‘后缀’
反引号:
    `前缀$(变量)后缀`
    ps:在反引号中可以用$()来包裹变量,实现字符串的拼接
7)实例成员:计算属性 监听属性
计算属性:

? 1)计算属性其实就是vue中的方法属性,方法名可以作为属性来使用,属性值就是方法的返回值

? 2) 在computed中声明的方法属性,不能在data中重复声明,比data中声明的属性要多出些逻辑的的地方

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

? 4 方法属性一定要在页面中渲染一次,这样方法属性才会有意义,多次渲染,方法属性只会被调用一次

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

案例:

计算机案例:
    <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>
<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>
监听属性

? 1)watch中不定义属性,只是监听属性,所以方法的返回值没有任何的意义

? 2)watch中的方法名,就是被监听的属性(方法名同被监听属性名要一致)

? 3)被监听的变量值一旦发生更新,监听的方法就会被调用

应用场景:

? 1)k线图:股票数据变化,页面的k线图重新渲染(需要逻辑将数据转换成图形)

? 2)拆分姓名:录入姓名,拆分成姓和名(需要逻辑将每一个数据拆分成多个数据)

案例:

拆分姓名:
<div id="app">
    姓名:<input type="text" v-model="full_name">
    <hr>
    姓:<button>{{ first_name }}</button>
    名:<button>{{ last_name }}</button>
</div>
<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的项目开发

1)环境:安装vue的脚手架cli环境
"""
node    ~~      python
npm     ~~      pip

python:c语言编写,解释执行python语言的
node:c++语言编写,解释执行JavaScript语言的
npm类似于pip,是为node环境安装额外功能的

"""

"""
1)官网下载并安装node,附带npm
    https://nodejs.org/zh-cn/
2)换源:将npm欢迎为cnpm
    npm install -g cnpm --registry=https://registry.npm.taobao.org
3)安装vue脚手架  
    cnpm install -g @vue/cli
注:如果第二三步异常,基本都是由网络导致的,可以重新执行第二三步,如果一直有问题,可以清理缓存后重复
    npm cache clean --force
"""
2)项目的创建:在终端创建
具体步骤:

? 见文档pdf

?

各插件的作用

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

? Router:前台路由

? Vuex:前台仓库,相当于单例,完成各组件的传参

项目移植步骤:

? 1)拷贝出环境,除node_modules 以外的文件和文件夹到目标文件夹

? 2)终端进入目标文件夹所在的位置

? 3)执行:nmp install 重新构建依赖 (nmp可以换成cnpm)

pycharm配置并启动vue项目,vue项目目录结构的分析

? 见文档pdf

vue组件(.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')
改写
import Vue from 'vue'  // 加载vue环境
import App from './App.vue'  // 加载根组件
import router from './router'  // 加载路由环境
import store from './store'  // 加载数据仓库环境

Vue.config.productionTip = false;  // tip小提示

import FirstCP from './views/FirstCP'
new Vue({
    el: '#app',
    router: router,
    store: store,
    render: function (readVueFn) {
        return readVueFn(FirstCP);  // 读取FirstCP.vue替换index.html中的占位
    }
});

路由与根组件(重点)

路由核心配置:router/index.js

// import 别名 from '文件'
import Home from '../views/Home'
import About from '../views/About'
import First from '../views/FirstCP'

// 路由配置
// 1)当用户在浏览器中访问的路由是 / ,router插件就会加载 Home.vue文件,同理 /about 就是 About.vue文件
// 2)将加载的 Home.vue文件 或者 About.vue文件,去替换App.vue文件中的 <router-view />占位符
// 3)用redirect配置来实现路由的重定向
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/home',
        redirect: '/',  // 路由的重定向
    },
    {
        path: '/about',
        name: 'About',
        component: About
    },
    {
        path: '/first',
        name: 'First',
        component: First
    }
];
根组件占位渲染页面组件
<!--
1)App.vue是项目的根组件,是唯一由main.js加载渲染的组件,就是替换index.html页面中的<div id="app"></div>的占位标签
2)实际开发中App.vue文件中,只需要书写下方五行代码即可(可以额外增加其他代码)
3)router-view是一个占位标签,由router插件控制,可以在router的配置文件中进行配置
4)router-view就是根据router在index.js中配置的路由关系被 指定路径 匹配 指定页面组件 渲染
    router-view或被不同的页面组件替换,就形成了页面跳转
-->
<template>
    <div id="app">
        <!-- 前台路由占位标签,末尾的/代表单标签的结束 -->
        <router-view />
    </div>
</template>

页面组件渲染小组件(重点)

页面组件作为父组件:views/*.vue

<template>
    <div class="home">
        <!-- vue项目下的html是支持大小写,且区分大小写 -->
        <Nav />
    </div>
</template>

<script>
    // 父组件加载子组件:父组件通常是页面组件,是被一个个小组件这些子组件组装成的页面
    // 1)导入语法要在 export default{} 之上完成
    // 2)@符合标识 项目src文件夹 绝对路径
    // 3)要在export default{} 的括号中用 components 注册
    // 4)在该组件的模板中就可以渲染子组件了(html代码中是区别大小写的)
    // 5)步骤:i)导入子组件 ii)注册子组件 iii)使用子组件
    import Nav from '@/components/Nav'

    export default {
        components: {
            Nav,
        }
    }
</script>

<style scoped>
    .home {
        width: 100vw;
        height: 100vh;
        background-color: orange;
    }
</style>

导航栏小组件(封装路由跳转):components/*.vue

<template>
    <div class="nav">
        <img src="" />
        <ul>
            <li>
                <!-- router控制的路由,不是用a标签完成跳转:
                    1)a标签会刷新页面,错误的
                    2)router-link标签也能完成跳转,且不会刷新页面,就是router提供的a标签(最终会被解析为a标签,还是用a来控制样式)
                    3)router-link标签的to属性控制跳转路径,由两种方式
                        i) to="路径字符串"
                        ii :to="{name: '路由名'}"
                -->
                <a href="/">主页</a>
            </li>
            <li>
                <router-link to="/about">关于页</router-link>
            </li>
            <li>
                <!-- to="字符串",v-bind:to="变量",可以简写为 :to="变量" -->
                <router-link :to="{name: 'First'}">第一页</router-link>
            </li>
        </ul>
    </div>
</template>

<style scoped>
    .nav {
        width: 100%;
        height: 80px;
        background: rgba(0, 0, 0, 0.3);
    }
    img {
        width: 200px;
        height: 80px;
        background: tan;
        float: left;
    }
    ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;
        height: 80px;
        background: pink;
    }
    ul li {
        float: left;
        height: 80px;
        padding: 30px 20px 0;
    }
    a {
        color: black;
    }
</style>

实例成员:计算属性 监听属性以及vue的项目开发

标签:加载   匹配   template   view   button   案例   访问   range   padding   

原文地址:https://www.cnblogs.com/godlover/p/12305853.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!