【vue】上手vue

最新推荐文章于 2021-07-13 16:42:17 发布
最新推荐文章于 2021-07-13 16:42:17 发布
阅读量183 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/108587753
版权

文章目录

Vue实例

安装完vue-loader后，必须，

  • npm installl --save-dev vue-template-compiler
  • 在webpack配置文件的plugins字段添加VueLoaderPlugin
const {VueLoaderPlugin} = require("vue-loader");
module.exports = {
	plugins:[
		new VueLoaderPlugin()
	]
}

webpack打包时，默认加载的是vue/dist/vue.runtime.esm.js，但是如果代码里有字符串模板，则需要编译器将字符串模板编译成render函数，因此需要使用完整版本，即vue/dist/vue.esm.js。
此时在webpack.config.js中添加如下配置即可。

module.exports = {
	resolve:{
		"alias":{
			"vue$":"vue/dist/vue.esm.js"
		}
	}
}

比如，

<body>
    <div id="root">
        <p>{{message}}</p>
    </div>
</body>

import Vue from "vue";
const vm = new Vue({
	el:"#root",
	data:{
		message:"hello world"
	}
})

如果直接使用vue的运行时版本，就会遇到这个问题：
vue.runtime.esm.js:638 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
这时，使用以上方法就可以解决。

选项对象
const vm = new Vue({
	//选项
})

创建一个vue实例，并传入选项对象。

<body>
    <div id="root">
        <div>{{a}},{{b}}</div>
    </div>
</body>

import Vue from "vue";

const data = {
    a:"hello",
    b:"world"
}
const vm = new Vue({
    el:"#root",
    data:data
});

console.log(vm.$data === data);
console.log(vm.$el);
vm.$watch("a",function(newValue,oldValue){
    if(newValue!==oldValue){
        console.log(`a is changed to be '${newValue}'`);
    }
})
data.a = "hi"

在这里插入图片描述

  • 在选项属性或者回调函数中，慎用箭头函数，因为this
    在这里插入图片描述
data

data对象中的属性会成为Vue实例vm的属性，所以可以访问vm.a、vm.b。

<body>
    <div id="root">
        <div>{{a}},{{b}}</div>
    </div>
</body>

import Vue from "vue";

const vm = new Vue({
    el:"#root",
    data:{
        "a":"hello",
        "b":"world"
    }
});
console.log(vm.a);
console.log(vm.b);
computed
  • 计算属性也会成为Vue实例vm的属性
    计算属性reversedMessage成为了Vue实例vm的属性，所以可以访问vm.reversedMessage。
<body>
    <div id="root">
        <div>{{message}}</div>
        <div>{{reversedMessage}}</div>
    </div>
</body>

import Vue from "vue";

const vm = new Vue({
    el:"#root",
    data:{
        "message":"hello world"
    },
    computed:{
        "reversedMessage":function(){
            return this.message.split("").reverse().join("");
        }
    }
});
console.log(vm.message);
console.log(vm.reversedMessage);
  • 计算属性默认只有getter，如果需要也可以提供setter
<body>
    <div id="root">
        <div>{{fullname}}</div>
    </div>
</body>

import Vue from "vue";

const vm = new Vue({
    el:"#root",
    data:{
        "firstname":"Steve",
        "lastname":"Jobs"
    },
    computed:{
        "fullname":{
            get:function(){
                return this.firstname+" "+this.lastname;
            },
            set:function(val){
                const [firstname,lastname] = val.split(" ");
                this.firstname = firstname;
                this.lastname = lastname;
            }
        }
    }
});

vm.fullname = "Tomas Edison"
watch
<body>
    <div id="root">
        <div><input type="text" v-model="content"></div>
        <div>content is {{content}}</div>
    </div>
</body>

import Vue from "vue";

const vm = new Vue({
    el:"#root",
    data:{
        "content":""
    },
    watch:{
        "content":function(newValue,oldValue){
            console.log(`content is '${newValue}'`);
        }
    }
});
指令
参数

v-bind:参数，如v-bind:title，将元素的title属性与表达式text绑定

<body>
    <div id="root">
        <div v-bind:title="text">hi</div>
    </div>
</body>

import Vue from "vue";

const vm = new Vue({
    el:"#root",
    data:{
        text:"hello world"
    }
});

在这里插入图片描述

v-bind:disabled，将元素的disabled属性与表达式isDisabled绑定。

<body>
    <div id="root">
        <button v-bind:disabled="isDisabled">click me</button>
    </div>
</body>

import Vue from "vue";

const vm = new Vue({
    el:"#root",
    data:{
        isDisabled:true
    }
});

在这里插入图片描述

动态参数

动态参数名最好全小写，如有必要，短横线分隔命名（kebab-case），如v-bind:[titlename]、v-on:[eventname]，但不要写成v-bind:[titleName]、v-on:[eventName]，因为浏览器在解析html时，会将元素属性名全部转换成小写。
在这里插入图片描述

组件

组件是可复用的Vue实例，所以它可以接受和new Vue()相同的选项对象，比如data、computed、watch、methods、生命周期钩子等。唯一的例外就是el，它是根实例特有的。

组件名

放在html里的组件名最好 全部小写，如有必要，短横线分隔命名（kebab-case），因为浏览器在解析html标签时会将大写字母转换成小写字母。看个例子。

<body>
    <div id="root">
        <MyComponent></MyComponent>
    </div>
</body>

import Vue from "vue";

Vue.component("MyComponent",{
    template:"<div>hello world</div>"
})
const vm = new Vue({
    el:"#root"
})

在这里插入图片描述
针对以上问题，以下任一种方式都可以解决。
在这里插入图片描述

组件的data必须是一个函数

根实例的data是一个对象，但组件的data必须是一个函数

每个组件必须只有一个根元素
父组件通过props向子组件传递数据
props名

html里的props名最好全小写，如有必要，短横线分隔命名（kebab-case），因为浏览器在解析html时，会将props名从大写字母转换成小写字母。看个例子。

<body>
    <div id="root">
        <Counter initValue="10"/>
    </div>
</body>

import Vue from "vue";

Vue.component("Counter",{
    template:"<div>{{initValue}}</div>",
    props:["initValue"]
})
const vm = new Vue({
    el:"#root"
})

在这里插入图片描述
针对以上问题，以下任一写法皆可。
在这里插入图片描述

动静态props

props分静态和动态。

  • 静态props和普通的DOM属性差不多，比如title，静态props的值总是一个字符串
<body>
    <div id="root">
        <my-component a="hello" b="world"/>
    </div>
</body>

import Vue from "vue";
Vue.component("my-component",{
    template:'\
    <div>\
        <div>{{a}}</div>\
        <div>{{b}}</div>\
        <div>{{a+b}}</div>\
    </div>\
    ',
    props:["a","b"]
})
const vm = new Vue({
    el:"#root"
})
  • 动态props就是v-bind:名称，如v-bind:title，动态props的值可以是一个数值、布尔值、字符串、数组、对象等任意类型
<body>
    <div id="root">
        <my-component v-bind:a="10" v-bind:b="20"/> 
    </div>
</body>

import Vue from "vue";
Vue.component("my-component",{
    template:'\
    <div>\
        <div>{{a}}</div>\
        <div>{{b}}</div>\
        <div>{{a+b}}</div>\
    </div>\
    ',
    props:["a","b"]
})
const vm = new Vue({
    el:"#root"
})

在这里插入图片描述

<body>
    <div id="root">
        <my-component 
            v-bind:num="10"
            v-bind:is-need="false"
            v-bind:list="[1,2,3]"
            v-bind:obj="{a:'hello',b:'world'}"
        /> 
    </div>
</body>

import Vue from "vue";
Vue.component("my-component",{
    template:'\
    <div>\
    <div>{{num}} is {{Object.prototype.toString.call(num)}}</div>\
    <div>{{isNeed}} is {{Object.prototype.toString.call(isNeed)}}</div>\
    <div>{{list}} is {{Object.prototype.toString.call(list)}}</div>\
    <div>{{obj}} is {{Object.prototype.toString.call(obj)}}</div>\
    </div>\
    ',
    props:["num","isNeed","list","obj"]
})
const vm = new Vue({
    el:"#root"
})

在这里插入图片描述

  • v-bind传递一个对象的所有属性
<body>
    <div id="root">
        <todo-list></todo-list>
    </div>
</body>

import Vue from "vue";
Vue.component("todo-list",{
    template:'<ul>\
        <todo-item \
            v-for="item in list"\
            v-bind:key="item.id"\
            v-bind="item">\
        </todo-item>\
    </ul>',
    data:function(){
        return {
            list:[
                {id:"#1",title:"吃饭",isDone:true},
                {id:"#2",title:"睡觉",isDone:true},
                {id:"#3",title:"打豆豆",isDone:false},
            ]
        }
    }
});

Vue.component("todo-item",{
    props:["title","isDone"],
    template:'<li>\
        <input type="checkbox" v-model="isDone">\
        <span>{{title}}</span>\
    </li>'
});

const vm = new Vue({
    el:"#root"
})

在这里插入图片描述

props验证
<body>
    <div id="root">
        <Counter v-bind:init-value="10"/>
    </div>
</body>

import Vue from "vue";

Vue.component("Counter",{
    // props:{
    //     initValue:[String,Number]
    // },
    props:{
        initValue:{
            type:Number,
            required:true
        }
    },
    data:function(){
        return {
            count:this.initValue
        }
    },
    template:'<div>\
        <span>{{count}}</span>\
    </div>',
})

const vm = new Vue({
    el:"#root"
})

在这里插入图片描述
props的类型还可以是一个构造函数。

<body>
    <div id="root">
        <book-set/>
    </div>
</body>

import Vue from "vue";

function Person(firstname,lastname){
    this.firstname = firstname;
    this.lastname = lastname;
}
Vue.component("Book",{
    props:{
        author:Person
    },
    computed:{
        fullname:function(){
            const {firstname,lastname} = this.author;
            return firstname +" "+lastname;
        }
    },
    template:'<div>\
        <span>The author of the book is {{fullname}}</span>\
    </div>'
})
Vue.component("book-set",{
    data:function(){
        return {
            person:new Person("Steve","Jobs")
        }
    },
    template:'<Book v-bind:author="person"></Book>'
})

const vm = new Vue({
    el:"#root"
})

在这里插入图片描述

非prop的attribute
  • 非props的attributes会被添加到组件根元素上，且可以通过this.$attrs访问
  • 如果不想将 非props的attributes添加到组件的根元素上，使用 inheritAttrs:false
<body>
    <div id="root">
        <Counter v-bind:init-value="10"
                    a="hello"
                    b="world">
        </Counter>
    </div>
</body>

import Vue from "vue";

Vue.component("Counter",{
    inheritAttrs:false,
    props:["initValue"],
    template:'<div>\
    <span>{{count}}</span>\
    </div>',
    data:function(){
        return {
            count:this.initValue
        }
    },
    mounted:function(){
        console.log("this.$attrs",this.$attrs);
    }
})

const vm = new Vue({
    el:"#root"
})

在这里插入图片描述

子组件向父组件传递数据

子组件通过调用this.$emit(事件名称)触发一个事件，父组件则通过v-on:事件名称监听子组件发出的事件。
本例中，子组件this.$emit("message",this.count)，$emit()的第二个参数，父组件里的事件处理程序可通过以下任一方式获取。

  • 第一种
    <Counter v-on:message='console.log($event)'/>
    $event的值就是this.count
  • 第二种
    <Counter v-on:message="handleMessage"/>
    事件处理程序handleMessage的第一个参数就是this.count

第一种

<body>
    <div id="root">
        <Counter v-on:message='console.log($event)'/>
    </div>
</body>

import Vue from "vue";

Vue.component("Counter",{
    template:'\
    <div>\
    <span>{{count}}</span>\
    <button v-on:click="handleClick">click me</button>\
    </div>\
    ',
    data:function(){
        return {
            count:0
        }
    },
    methods:{
        handleClick:function(){
            this.count++;
            this.$emit("message",this.count);
        }
    }
})
const vm = new Vue({
    el:"#root",
    data:{
        console:window.console
    }
});

第二种

<body>
    <div id="root">
        <Counter v-on:message="handleMessage"/>
    </div>
</body>

import Vue from "vue";


Vue.component("Counter",{
    template:'\
    <div>\
    <span>{{count}}</span>\
    <button v-on:click="handleClick">click me</button>\
    </div>\
    ',
    data:function(){
        return {
            count:0
        }
    },
    methods:{
        handleClick:function(){
            this.count++;
            this.$emit("message",this.count);
        }
    }
})
const vm = new Vue({
    el:"#root",
    methods:{
        handleMessage:function(a){
            console.log(a)
        }
    },
});
自定义事件

自定义事件名最好全小写，如有必要，使用短横线分隔命名（kebab-case）。

<body>
    <div id="root">
        <Counter v-on:countInc="handleInc"
                 v-on:countDec="handleDec"/>
    </div>
</body>

import Vue from "vue";


Vue.component("Counter",{
    template:'<div>\
            <span>{{count}}</span>\
            <button v-on:click="onIncrement">+</button>\
            <button v-on:click="onDecrement">-</button>\
            </div>',
    data:function(){
        return {
            count:10
        }
    },
    methods:{
        onIncrement:function(){
            this.count++;
            this.$emit("countInc");
        },
        onDecrement:function(){
            this.count--;
            this.$emit("countDec");
        }
    }
})
const vm = new Vue({
    el:"#root",
    methods:{
        handleInc:function(){
            console.log("handling inc");
        },
        handleDec:function(){
            console.log("handling dec");
        }
    }
})

在这里插入图片描述
针对以上问题，有如下两种解决方法。
在这里插入图片描述

内置组件slot实现内容传递

通过slot往组件中插入内容。

<body>
    <div id="root">
        <my-component>
            <div>world</div>
        </my-component>
    </div>
</body>

import Vue from "vue";

Vue.component("my-component",{
    template:'\
    <div>\
        <div>hello</div>\
        <slot></slot>\
    </div>\
    '
})
const vm = new Vue({
    el:"#root"
})

在这里插入图片描述

is属性

像table标签，其子元素必须是thead、tbody、tr、th、td，如果是其他元素，则会被提升到table的外部。举个例子。

<body>
    <div id="root">
        <table>
            <tr>
                <td>hello</td>
                <td>world</td>
            </tr>
            <div>have a nice day</div>
        </table>
    </div>
</body>

在这里插入图片描述

<body>
    <div id="root">
        <table>
            <my-component></my-component>
        </table>
    </div>
</body>

import Vue from "vue";

Vue.component("my-component",{
    template:'\
        <div>\
        <div>hello</div>\
        <div>world</div>\
        </div>\
    '
});
const vm = new Vue({
    el:"#root"
});

在这里插入图片描述
table中的内容被提取到了外面，不符我们的预期，如何破？is属性很给力！

<body>
    <div id="root">
        <table>
            <tr is="my-component"></tr>
        </table>
    </div>
</body>


import Vue from "vue";

Vue.component("my-component",{
    template:'\
        <div>\
        <div>hello</div>\
        <div>world</div>\
        </div>\
    '
});
const vm = new Vue({
    el:"#root"
});

在这里插入图片描述

内置组件component实现动态组件

<component v-bind:is=""></component>实现动态组件

<body>
    <div id="root">
        <component v-bind:is="currentId"></component>
        <button v-on:click="handleClick">toggle</button>
    </div>
</body>

import Vue from "vue";

Vue.component("one-component",{
    template:"<div>hello</div>"
});
Vue.component("two-component",{
    template:"<div>world</div>"
})
const vm = new Vue({
    el:"#root",
    data:{
        currentId:"one-component"
    },
    methods:{
        handleClick:function(){
            if(this.currentId === "one-component"){
                this.currentId = "two-component";
            }else if(this.currentId === "two-component"){
                this.currentId = "one-component";
            }
        }
    }
});

在这里插入图片描述

注意，<component></component>，不要<component/>。
因为如果component后有内容，<component/>会导致其后面的内容无法显示。
在这里插入图片描述

richest_qi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3.0 上手体验
01-18
vue3.0 beta 版本已经发布有一阵子了，是时候上手体验一波了～ 注意，本文所有演示都是基于 vue3.0 beta 版本，不保证后续正式版 api 不改动。等官方文档出来后，以官网为准。 环境搭建 直接使用脚手架，如果本地...
vue3快速上手.md
01-06
- Vue3可以更好的支持TypeScript 4.新的特性 1. Composition API（组合API） - setup配置 - ref与reactive - watch与watchEffect - provide与inject 2. 新的内置组件 - Fragment - Teleport - Suspense 3. ...
Vue3快速上手.md
最新发布
01-21
这个是禹神Vue3的最新笔记！！！
vue111111111111111111
01-10
Vue.js 的设计理念是让开发变得简单且高效，它具有轻量级、组件化、易上手的特点，广泛应用于单页应用（SPA）和复杂网页应用的开发。 在“vue111111111111111111”这个项目中，我们可以推测这是关于Vue.js的学习或...
使用ant-design-vue的Table组件
richest_qi的博客
05-25 6376
使用Vue CLI新建项目 vue create antd-demo 下载ant-design-vue，ant-design-vue@2.1.6 npm install ant-design-vue@next --save 修改main.js，完整引入ant-design-vue所有组件及样式 import { createApp } from 'vue' import App from './App.vue' import Antd from "ant-design-vue"; impor.
antd Table组件的使用
richest_qi的博客
05-26 4432
:data-source与:dataSource等效，:row-key与rowKey等效。 :row-key，表格行key的取值，可以是一个字符串，也可以是一个函数。 //rowKey是一个字符串 <a-table :columns="columns" :row-key="uid"></a-table> //rowKey是一个函数 <a-table :columns="columns" :row-key="record => record.uid"></.
使用ant-design-vue的树选择组件TreeSelect
richest_qi的博客
07-09 2805
HelloWorld.vue <template> <a-tree-select :replace-fields="{children:'children', title:'name', key:'id', value: 'id' }" style="width: 100%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" pla.
微信小程序的wx:for和vue的v-for
richest_qi的博客
05-31 2682
写代码的时候，微信小程序的wx:for和vue的v-for，有点搞混了，所以特意举个简单的例子(todos)来区分下。 微信小程序 index.wxml <view class="list"> <view class="item" wx:for="{{todos}}" wx:key="id"> {{item.id}}-{{item.title}} </view> </view> index.wxss .list{ margin:
ant-design-vue入门
richest_qi的博客
06-16 2321
文章目录Vue和Vue CLI创建项目项目结构集成ant-design-vue安装ant-design-vue使用ant-design-vue Vue和Vue CLI Vue CLI = Vue.js + 一堆插件 创建项目 全局安装Vue CLI：npm install -g @vue/cli 查看Vue CLI版本：vue --version或vue -V 安装Vue CLI时，最好添加版本号，如npm install -g @vue/cli@4.5.13 创建一个项目：vue create
组合式API
richest_qi的博客
05-18 2318
文章目录使用Vue CLI新建项目demo启动项目demo改造项目public目录下新增data.jsonsrc目录下新增api目录，api目录下新增repositories.jscomponents目录下删除HelloWorld.vue，新增RepositoriesList.vue修改App.vue启动应用组合式API参考文章 使用Vue CLI新建项目demo D:\VueProjects>vue create demo Vue CLI v4.5.13 ? Please pick a prese
使用ant-design-vue的Form表单
richest_qi的博客
06-22 2221
文章目录使用脚手架新建项目安装并导入ant-design-vue，使用Form组件修改main.ts修改App.vue修改Hello.vue启动应用，测试验证 使用脚手架新建项目 vue create antd-demo 所以，我们得到了这么一个项目，如下， 安装并导入ant-design-vue，使用Form组件 npm install --save ant-design-vue@next 修改main.ts import { createApp } from 'vue'; import App
【webpack】去console
richest_qi的博客
09-27 1896
要去除最终包中的一堆console，使用插件babel-plugin-transform-remove-console 安装插件 npm install --save-dev babel-plugin-transform-remove-console 使用插件 plugins:[ ["transform-remove-console",{ "exclude":["log"] }] ] 仅保留console.log，去除其他所有console。 const path = require("path");
安装Vue Devtools extension
richest_qi的博客
07-31 1415
本安装方法来自博主KaiSarH 克隆 vue-devtools仓 拉取的分支默认是dev分支，现切换至master分支：git switch master 安装依赖：npm install 构建：npm run build chrome里加载已解压扩展程序 2022年1月20日更新： 当前vue-devtools版本已经到了3，以上安装方法不奏效。 如果依然想使用2版本，可参考网友文章：https://blog.csdn.net/sinat_34849163/article/
【vue+vue-router】路径参数实现动态路由
richest_qi的博客
10-29 1386
helloworld <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title> <sty
使用ant-design-vue的button组件实现计数器
richest_qi的博客
06-16 1017
新建项目 本例使用的是vue3。 vue create demo Counter组件 // Counter.vue <template> <div>{{count}}</div> <a-button type="primary" @click="add" class="btn">加</a-button> <a-button type="primary" @click="sub" class="btn">.
【vue】render函数实现组件
richest_qi的博客
08-01 958
不论全局组件、局部组件还是单文件组件，都是使用模板创建HTML来实现组件。 //index.js import Vue from "vue"; import App from "./components/app.vue"; const vm = new Vue({ render:createElement => createElement(App) }).$mount('#root'); //app.vue <template> <div> <Acho
【vue】:class和:style
richest_qi的博客
07-16 761
:class :class='js表达式' 表达式是一个对象 该对象内联在模板里，:class="{key:value}" key是类名， value是布尔值。 value为true则有该类，false则没有该类 <template> <p :class="{smallFont:isSmall}">have a nice day</p> </template> <script> export default { data(){
【vue】props实现父子组件间通信
richest_qi的博客
08-10 734
props可以是数组，也可以是对象 //index.js import Vue from "vue"; import App from "./app.vue"; const vm = new Vue({ render:h => h(App) }).$mount('#root'); //app.vue <template> <!-- <BaseInput label-name="用户名"/> --> <BaseInpu
【Vue Router】动态路由匹配
richest_qi的博客
07-13 683
文章目录新建项目并改造项目第一种：使用 路由参数 时的路由匹配第二种：使用 URL查询参数 时的路由匹配 新建项目并改造项目 首先使用vue-cli新建一个项目。 然后对该项目进行改造，改造后的目录如下。 第一种：使用 路由参数 时的路由匹配 src\App.vue <template> <div id="nav"> <router-link to="/">首页</router-link> | <router-link to=
SystemVue软件入门指南：快速上手教程
"GettingStarted"部分可能是文档的起始章节，可能包含对SystemVue软件的介绍、安装步骤、系统要求、用户界面概述等内容，旨在帮助新用户快速理解和上手使用这款软件。这部分可能还会涵盖基本的项目设置、设计流程...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值