Vue
文章平均质量分 55
-irony-
keeping coding
展开
-
组件函数的调用
通过Vue提供的ref属性去访问子组件实例,并调用子组件中的方法调用子组件中的方法通过ref属性来访问子组件实例,并调用子组件中的方法:给要访问的子组件添加ref属性<template> <Modal ref="modal"></Modal></template>调用子组件中的方法通过this,$refs.modal来访问自定义组件Modal.vue:<script>export default { meth.原创 2021-08-23 10:53:59 · 269 阅读 · 0 评论 -
自定义组件绑定原生事件和自定义事件
在自定义组件的根元素上监听一个原生事件在和html原生标签上监听一个原生事件是有区别的如在App.vue中:<!-- 给自定义组件添加点击事件 print --><Article v-for="article in articleList" :key="article.title" :article="article" @click="print(article)"></Article>在Article.vue中:<div clas.原创 2021-08-23 10:23:59 · 266 阅读 · 0 评论 -
组件单向数据流
复用的组件里显示的内容往往是不同的,同一个组件,显示内容不同prop的使用方法当父组件给子组件的prop传递一个值的时候,这个值就变成了子组件的实例的属性首先在父组件中传递一个title给子组件:<template> <div id="app"> <!-- 注意!title1 和 title2 是父组件的 data 中定义的数据,title 则是子组件中接收数据时的变量名 --> <HelloVue :title="title1".原创 2021-08-22 16:28:38 · 127 阅读 · 0 评论 -
Vue-自定义组件
组件是可复用的Vue实例,我们把重复用到的功能封装成自定义组件组件的注册为了能在模板中使用,组件必须先注册组件的注册分为全局注册和局部注册:全局注册: 用Vue.component来创建组件,注册之后可以在任何新创建的Vue根实例中使用局部注册: 在单个Vue格式的文件中创建组件,在需要用到的地方注册通常选择局部注册组件的创建每个Vue格式的文件都可以作为组件来使用组件的局部注册通过vue-cli创建的vue工程默认存在一个组件HelloWorld.vue,以它为例:我们.原创 2021-08-22 15:51:52 · 64 阅读 · 0 评论 -
动态style
:class可以理解为外部样式,行内样式则是:style对象语法和:class语法不同的是它的键值对是css样式的属性:值<div :style="{background:'red','font-weight':700,'font-size':'20px'}"></div>引号的使用属性:属性为单个字符可以不用引号,如果是带连字符如font-weight,就要用引号值: 除了数字都要加引号要避免使用引号可以去掉连字符改变动态样式的书写位置要是加的样式很多时可.原创 2021-08-22 10:59:20 · 5132 阅读 · 0 评论 -
Vue-动态class
动态绑定动态绑定的语法:<div class="base" v-bind:class="{ active: isActive }"></div>.active { border: 1px solid green;}isActive是boolean类型的值,决定是否应用该类名类名的书写如果是单个类名的书写就和上面一样,如果是带字符的类名则要加引号将类名括起来引号规则看类名的引号决定外面大括号的引号:<!-- 外双内单 --><原创 2021-08-22 10:38:29 · 422 阅读 · 0 评论 -
Vue-计算属性
计算属性是继data,methods,watch之后的新成员书写位置:<script> export default { name: 'app', // 计算属性 computed: {}, };</script>计算属性的写法:<script> export default { name: "app", data:function(){ return { .原创 2021-08-19 20:57:49 · 54 阅读 · 1 评论 -
Vue条件和列表渲染语句
条件渲染语句可以把它看成if语句,条件满足时会显示标签里的内容<p v-if="isPassed">{{ score}}</p><script>export default { name: "app", // 数据 data() { return { //当条件满足的时候,显示这里的内容 score: 78 }; }, methods:{原创 2021-08-19 17:26:53 · 72 阅读 · 0 评论 -
Vue Template
HTML属性渲染语法动态绑定–v-bind在HTML中每个标签都有自己的属性,要让他们随data中定义的值变化而变化,就要用到属性绑定例如img标签的alt属性:<template> <div id="app"> <img src="#" v-bind:alt="imgText" /> </div></template><script>export default { name: "app",原创 2021-08-19 16:02:54 · 82 阅读 · 0 评论 -
Vue监听数据变化
监听数据变化,在Vue中是通过侦听器来实现的,时刻监听某个数据的变化watch的基本用法侦听器的书写位置<script> export default { name: "app", // 数据 key---data value---Function data: function () { return { count: 1 }; }, // 方法 key---methods value---{}.原创 2021-08-19 10:09:47 · 7033 阅读 · 0 评论 -
Vue的双向绑定
处理用户输入v-model(双向绑定) --input双向绑定就是我们在input框当中输入内容时,显示内容的地方也会随之改变定义一个HTML代码<template><!--这里的v-model="message"将input的值绑定--> <p class="page">{{message}}</p> <input type="text" v-model="message" placeholder="请输入你想输入的内容" /&g原创 2021-08-18 11:17:52 · 193 阅读 · 0 评论 -
Vue的声明渲染
Vue代码结构我们可以将代码写在app.vue中,以下是app.vue中的代码// template即模版的意思,每一个vue文件里必须要有一个,在这里写HTML代码<template> <div id="app"></div></template>// 在这里写js逻辑相关的代码<script> export default { name: "app" };</script>// 这里写样式原创 2021-08-16 11:49:45 · 417 阅读 · 0 评论 -
Vue的简介
Vue的介绍Vue是用于构建用户界面的渐进式框架,主要特点是易用,灵活,性能优良有兴趣可以查看一下官方介绍的视频点击这里Vue的配置安装node.js我们需要的是node.js里的npm,安装很简单首先去官网下载安装包node.js官网选择下载最新版本即可,一直下一步进行安装安装完成后直接win+R打开cmd,输入node -v查看版本号顺带检查一下npm(包管理工具),输入npm -v安装Vue CLI(脚手架)Vue CLI就是Vue工程的升级版,更牛逼一点执行以下命令原创 2021-08-16 09:31:24 · 87 阅读 · 1 评论