Vue
qq_42079011
这个作者很懒,什么都没留下…
展开
-
Vue---day8---style上的scoped
<template> <div id="SendParams"> {{$route.params.mypage}}是获取的数据 </div></template><script> export default { name: "SendParams", data() { return { page:$route.params.mypage } } }&l原创 2020-07-28 18:42:14 · 121 阅读 · 0 评论 -
vue---day07---组件基础
组件基础这里写的官网上的例子。 <div id="app"> <mybutton></mybutton> </div> <script> Vue.component("mybutton", { data:function () { return {原创 2020-07-12 16:41:02 · 135 阅读 · 0 评论 -
Vue---day06---表单输入绑定(双向绑定)
表单输入绑定你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖(这里前面写过大致是由哪两种指令)。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 <div id="app"> <input type="checkbox"原创 2020-07-11 16:32:55 · 121 阅读 · 0 评论 -
Vue---day06---事件处理
监听事件v-on可以指定监听DOM事件,并在触发时执行一些JS代码。<button v-on:click="(JS)"></button>其中JS可代表 js代码 js方法名 或者直接就是js调用方法。<button v-on:click="counter += 1">Add 1</button><button v-on:click="greet">Greet</button><button v-on:cl原创 2020-07-11 12:17:21 · 113 阅读 · 0 评论 -
Vue---day05---过滤排序
过滤排序有时我们需要对数据进行一些操作,再使他出现在网页上,比如简单的排序,过滤。但是又不能改变源数据的时候,就可以用计算属性来进行操作 <div id="app"> <li v-for="i in nextnums"> {{i}} </li> </div> <script> var vm = new Vue原创 2020-07-10 14:48:54 · 88 阅读 · 0 评论 -
Vue---it‘s in production mode or explicitly disabled by the author
对于这种情况,在按照网上的改配置文件后依然存在的,那么大部份是因为找不到Vue.js ,而我们在代码里导入的是Vue.min.js,所以无法正常使用Vue.js devtools插件,所以将<script src="../static/vue.min.js"></script>改为<script src="../static/vue.js"></script>就可以了。...原创 2020-07-09 16:04:03 · 588 阅读 · 0 评论 -
Vue---day4---列表渲染
列表渲染v-for指令v-for=“item in items”这里的items指的是源数组,item则是为他取的别名,相关代码案例在前面Vue介绍那篇博客已经展示过了。这里再补充一个v-for使我们可以访问父作用域的property,还有一个可选的第二参数,也就是当前元素的索引index。<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }}原创 2020-07-09 11:55:32 · 101 阅读 · 0 评论 -
Vue---day03---条件渲染
条件渲染v-if前面讲过v-if和v-else,v-else-if的用法,这里在补充一些当有一组元素需要添加v-if指令时,为每个元素都添加v-if就会显得尤为恼火。这时可以使用template元素 <div id="app"> <template v-if="ok"> <p>hello</p> <br> <sp原创 2020-07-08 16:50:31 · 70 阅读 · 0 评论 -
Vue---day03---Class与Style绑定
Class与Style绑定html class绑定同样使用v-bind指令来为标签的class属性动态绑定v-bind:class="{目标类:布尔值,目标类:布尔值,....}" <head> <script src="../static/vue.min.js"></script> <style> p.myfont{ color:red }原创 2020-07-08 16:29:18 · 145 阅读 · 0 评论 -
Vue---day02---计算属性和侦听器
计算属性在{{}}内的表达式确实很简便,但是有时却容易因为逻辑过多而显得异常繁杂。从而违背了它的设计初衷,那么就有离了别的方法来达到需要的结果计算属性方法侦听属性对于计算属性和方法 <div id="app"> <p>{{message}}</p> <p>{{res_com}}</p> <p>{{res_met()}}</p>原创 2020-07-08 10:50:45 · 124 阅读 · 0 评论 -
Vue---day02---插值指令与动态参数
插值Attribute如果想将Vue实例上的属性,加到Html attribute上的话,{{}} 已经不足以满足,此时我们就需要使用v-bind指令来完成了。 <div id="app"> <span> {{IDC}} </span> <br> <span v-bind:id="IDC">原创 2020-07-07 13:36:05 · 262 阅读 · 0 评论 -
Vue---day01---模板语法
模板语法文本前面常用的{{message}}就是一种最常用的叫做“Mustache”语法 (双大括号) 的文本插值方式,此时Mustache会将当前数据对象上的message的值动态更新插值处内容。而v-once则可以只做第一次插入数据,然后就不再更新,但是请留意该节点上其他的数据绑定 <div id="app9_1"> {{message}} </div> <div id="app9_2">原创 2020-07-06 21:08:40 · 126 阅读 · 0 评论 -
Vue---day01--数据方法与生命周期
Vue实例在开始学习Vue实例之前需要知道每一个Vue都是通过Vue函数创建一个Vue实例开始的一个Vue应用都由 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成。所有的 Vue 组件都是 Vue 实例,并且接受相同的选项对象 (一些根实例特有的选项除外)。创建Vue实例基本模板就是 var vm = new Vue({ //参数列表 })数据与方法当创建一个Vue时,其内部的所有property都会被加入到Vue的响应式原创 2020-07-06 15:17:45 · 121 阅读 · 0 评论 -
Vue---day01---Vue介绍
Vus.js是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:<!--这是HTML代码--><div id="app原创 2020-07-06 12:50:20 · 192 阅读 · 0 评论