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 · 288 阅读 · 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 · 302 阅读 · 0 评论 -
组件单向数据流
复用的组件里显示的内容往往是不同的,同一个组件,显示内容不同 prop的使用方法 当父组件给子组件的prop传递一个值的时候,这个值就变成了子组件的实例的属性 首先在父组件中传递一个title给子组件: <template> <div id="app"> <!-- 注意!title1 和 title2 是父组件的 data 中定义的数据,title 则是子组件中接收数据时的变量名 --> <HelloVue :title="title1".原创 2021-08-22 16:28:38 · 136 阅读 · 0 评论 -
Vue-自定义组件
组件是可复用的Vue实例,我们把重复用到的功能封装成自定义组件 组件的注册 为了能在模板中使用,组件必须先注册 组件的注册分为全局注册和局部注册: 全局注册: 用Vue.component来创建组件,注册之后可以在任何新创建的Vue根实例中使用 局部注册: 在单个Vue格式的文件中创建组件,在需要用到的地方注册 通常选择局部注册 组件的创建 每个Vue格式的文件都可以作为组件来使用 组件的局部注册 通过vue-cli创建的vue工程默认存在一个组件HelloWorld.vue,以它为例: 我们.原创 2021-08-22 15:51:52 · 73 阅读 · 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 · 5182 阅读 · 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 · 437 阅读 · 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 · 64 阅读 · 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 · 103 阅读 · 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 · 115 阅读 · 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 · 7093 阅读 · 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 · 206 阅读 · 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 · 432 阅读 · 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 · 99 阅读 · 1 评论