vue
文章平均质量分 61
时光足迹
这个作者很懒,什么都没留下…
展开
-
vscode git bash终端配置:terminal.integrated.profiles.windows
旧版VScode 的 git bash 终端配置如下:"terminal.integrated.shell.windows": "D:\\Program Files\\Git\\bin\\bash.exe"当VSCode升级至1.57.1(2021.6.17)时,会出现警告提示:此项已弃用,配置默认 shell 的新推荐方法是在 #terminal.integrated.profiles.windows# 中创建一个终端配置文件,并将其配置文件名称设置为 #terminal.integrated.d原创 2021-06-24 16:33:47 · 15454 阅读 · 10 评论 -
v-html 样式无效,图片不显示
代码模拟:<template> <article> <div>content1:接口返回</div> <div class="content" v-html="content1"></div> <div>content2:前端代码</div> <div class="content" v-html="content2"></div> </ar原创 2021-06-16 12:02:18 · 3699 阅读 · 0 评论 -
vue.js数据绑定语法
1.文本插值使用 “Mustache” 语法(双大括号),Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。Message: {{ msg }}2.原始HTML双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串,需要用三 Mustache 标签:{{{ raw_html }}}3.HTML原创 2016-10-08 14:16:24 · 742 阅读 · 0 评论 -
Filter过滤器(vue.js)
Vue.js 允许在表达式后添加可选的“过滤器 (Filter) ”,以“管道符”指示:{{ message | capitalize }}这里我们将表达式 message 的值“管输(pipe)”到内置的 capitalize 过滤器,这个过滤器其实只是一个 JavaScript 函数,返回大写化的值。过滤器可以串联:{{ message | filter原创 2016-10-08 14:20:36 · 5464 阅读 · 0 评论 -
v-bind,v-on的缩写
在构建单页应用(SPA )时,Vue.js 会管理所有的模板,此时 v- 前缀也没那么重要了。因此Vue.js 为两个最常用的指令 v-bind 和v-on 提供特别的缩写:v-bind缩写:ButtonButtonv-on缩写:原创 2016-10-08 14:24:56 · 29521 阅读 · 0 评论 -
计算属性vm.$watch与getter
1.vm.$wacthVue.js 提供了一个方法 $watch,它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时,可使用$watch{{fullName}}var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullN原创 2016-10-08 14:42:43 · 2219 阅读 · 0 评论 -
vue.js计算属性setter
计算属性默认只是 getter,不过在需要时你也可以提供一个 setter:// ...computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function原创 2016-10-08 14:46:27 · 7811 阅读 · 3 评论 -
Class 与 Style 绑定HTML Class(vue.js)
我们可以传给 v-bind:class 一个对象,以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存: var vm = new Vue({ el: '#static', data: { isA: true, is原创 2016-10-08 15:08:00 · 1033 阅读 · 1 评论 -
Class 与 Style 绑定内联样式(vue.js)
v-bind:style 的对象语法十分直观——看着非常像 CSS,其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case):data: { styleObject: { color: 'red', fontSize: '13px' }}原创 2016-10-08 15:55:59 · 2691 阅读 · 0 评论 -
事件修饰符vue.js
在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。为了解决这个问题,Vue.js 为 v-on 提供两个 事件修饰符:.prevent 与 .stop。......原创 2016-10-08 16:21:36 · 5505 阅读 · 0 评论 -
按键修饰符vue.js
在监听键盘事件时,我们经常需要检测 keyCode。Vue.js 允许为 v-on 添加按键修饰符:记住所有的 keyCode 比较困难,Vue.js 为最常用的按键提供别名:全部的按键别名:entertabdeleteescspaceupdownleftright可以自定义按键别名:// 可以使用 @keyup.f1Vue.directiv原创 2016-10-08 16:26:08 · 2265 阅读 · 0 评论 -
vue.js--删除列表中的一行
splice(index,num,item1,item2,...,itemX) 方法向/从数组中添加/删除项目,然后返回被删除的项目。注:index--规定添加/删除项目的位置 num--要删除的项目数量 item--向数组添加的新项目 splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个原创 2016-09-30 16:29:01 · 34086 阅读 · 5 评论 -
vue.js的事件处理器v-on:click
用 v-on 指令监听 DOM 事件注意:HTML5中不能使用v-on,换为@(1)html代码: Greet 或者 Greet(2)js代码:var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: {原创 2016-09-30 16:05:45 · 46246 阅读 · 0 评论 -
vue.js:Namespace "v-on" is not bound
在H5页面下,使用Vue的v-on:click,结果报错,错误提示:Namespace "v-on" is not bound,如下图所示:解决办法:将v-on换为@原创 2016-09-30 14:55:07 · 10013 阅读 · 3 评论 -
组件使用component
(1)组件注册// 定义var MyComponent = Vue.extend({ template: 'A custom component!'})// 注册Vue.component('my-component', MyComponent)// 创建根实例new Vue({ el: '#example'})(2)组件使用 组件渲染为:原创 2016-10-09 12:26:19 · 696 阅读 · 0 评论 -
父子组件通信vue.js
子组件可以用 this.$parent 访问它的父组件。根实例的后代可以用 this.$root 访问它。父组件有一个数组 this.$children,包含它所有的子元素。简单实例展示: Dispatch Event Messages: {{ messages | json }} // 注册子组件// 将当前消息派发出去Vue.component原创 2016-10-09 15:03:06 · 1021 阅读 · 0 评论 -
select动态绑定vue.js
动态选项,用 v-for 渲染: {{ option.text }} Selected: {{ selected }}new Vue({ el: '#demo', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two',原创 2016-10-09 09:43:35 · 40215 阅读 · 0 评论 -
vue.js入门实例
(1)页面模板 vue.js--快速入门Demo Vue demo ....... new Vue({ el:'#app', data:'' })原创 2016-10-11 15:03:33 · 7627 阅读 · 2 评论 -
Vue.js搭建路由报错 router.map is not a function
错误:解决办法:2.0已经没有map了,使用npm install [email protected] 命令兼容1.0版本vue再引入文件原创 2016-10-14 10:42:44 · 14851 阅读 · 1 评论 -
vue.js下载
什么是 Vue.js?Vue.js 是用于构建交互式的 Web界面的库。Vue.js 提供了 MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的 API。Vue.js特点· 简洁: HTML模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。· 数据驱动: 自动追踪依赖的模板表达式和计算属性。原创 2016-09-29 17:51:00 · 22042 阅读 · 0 评论 -
创建第一个vue应用
(1)应用结构(2)view层-HTML代码 VUE-HelloWorld {{ message }} new Vue({ el:'#app', data: { message:'Hello World!'原创 2016-09-29 17:55:53 · 1532 阅读 · 0 评论 -
vue.js双向数据绑定
创建一个view层 HTML文件:vueapp.htm,以及 model层文件:vueapp.js,然后通过 vue.js(使用v-model这个指令)完成中间的底层逻辑,实现绑定的效果。(1)vueapp.html代码: vue-双向数据绑定 修改输入框的值,查看效果: {{ message }}原创 2016-09-29 18:00:28 · 2000 阅读 · 0 评论 -
vue.js让双括号{{message}}的内容不随input的值改变
使用方法:在message前面加“*”原创 2016-09-29 18:06:35 · 3518 阅读 · 0 评论 -
vue.js列表输出v-for
(1)html代码: {{ todo.text }} (2)js代码: new Vue({ el:'#app', data: { todos: [ { text: 'Learn JavaScrip原创 2016-09-29 18:13:24 · 2137 阅读 · 0 评论 -
表单控件绑定vue.js
可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。(1)Text:单行文本Message is: {{ message }}(2)Multiline text:多行文本Multiline message is:{{ message }}(3)radio:单选框OneTwoPicked原创 2016-10-09 09:39:54 · 1315 阅读 · 2 评论