手机QQ浏览器不支持vue.js对象参数缩写

piapia 发布于2019-08-20 16:08 / 1055人阅读

摘要：最近正要用写个页面，非模块化开发，直接在页面引入和，在显示好好的，小米自带的浏览器也是正常的，然后到了手机浏览器就出问题了。官方文档写着可以用缩写形式只写，然后在手浏览器是不行的，必须的形式存在。

最近正要用vue.js写个页面，非模块化开发，直接在页面script引入vue.js和vue-router.js，在 chrome 显示好好的，小米自带的浏览器也是正常的，然后到了手机QQ浏览器就出问题了。

官方文档：https://router.vuejs.org/zh-c...

官方示例修改

html





  Hello App!
  
    
    
    
    Go to Foo
    Go to Bar

javascript

// 1. 定义（路由）组件。
// 这里把 template 放到了 html 里去，用 script 标签存放着，调用的时候用 #{id}，.{class}我没试过，不知道行不行
const Foo = { template: "#foo" };
const Bar = { template: "#bar" };

// 2. 定义路由
// 从上一个就应该开始注意了，const 语句后面要加分号“;”
const routes = [
  { path: "/foo", component: Foo },
  { path: "/bar", component: Bar }
];

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes: routes // 官方文档写着可以用缩写形式只写 routes，然后在手Q浏览器是不行的，必须 key: value 的形式存在。
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router: router    // 这里同样是必须 key: value 形式，不然运行不起来
}).$mount("#app");

// 现在，应用已经启动了！

在 html 里写模板

使用 const Foo = { template: "

foo

" } 这种在 script 里写模板 html 很不方便，特别是内容比较多的时候，遇到换行还会报错，要行全写一行，要么是用 + 号连接起来。

也是在 vuejs的组件中该如何引用一个html模板而不是片段? 上看到 @dososo 指点的方法，果然很赞！

经过上面的一番改造，终于可以兼容手Q浏览器了~

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82737.html

vue2实践（持续更新）

摘要：记录一些小技巧和踩过的坑由于本篇文章内容太多，导致编辑器有点卡，所以新开辟了一篇实践二，后续再这里更新。组件的生命周期函数是在标签里的数据发生变化时候触发数据可能更新了，但是没有绑定到上面的话，不会调用钩子函数。记录一些小技巧和踩过的坑由于本篇文章内容太多，导致SF编辑器有点卡，所以新开辟了一篇 vue2实践（二），后续再这里更新。 1. props 带不带冒号的区别 ...

n7then 2019-08-20 15:05 评论0 收藏0
vue.js快速入门

摘要：的核心库只关注视图层，并且非常容易学习，同时拥有非常容易上手的中英文都有提供快速入门准备地址地址没错就只需要这两个就可以开发了是核心文件，在这里只是为了提高开发效率而引用的，是可选的。专门存储一些数据的属性，数据一定是对象格式。 **关于前阵子的文章错误有点多所以从新修改了并添加了一些在官方脚手架vue-cli开发时需要注意的事项，Vue.js是一个轻巧、高性能、可组件化的MVVM库。...

dantezhao 2019-08-20 13:46 评论0 收藏0
Vue.js-开篇

摘要：挂载成功后，可以通过访问该元素。选项用于声明应用内需要双向绑定的数据。主要解绑一些使用监听的事件等。指令事件指令是模板中最常用的一项功能，它带有前缀。指令的主要职责就是当其表达式的值改变时，相应地将某些行为应用到上。学习笔记：Vue.js基础知识基础知识构造函数Vue的根实例new Vue({})，并启动Vue应用。 var app = Vue({ el: #app, ...

leejan97 2019-08-23 16:01 评论0 收藏0
VUE.js第三课模板语法

摘要：模板语法使用了基于的模版语法，允许开发者声明式地将绑定至底层实例的数据。的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进的系统。指令用于在表达式的值改变时，将某些行为应用到上。 Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数...

lx1036 2019-06-27 16:34 评论0 收藏0