‘壹’ vue中如何拼接字符串
vue.js 中的可以实现字符串操作
主要通过两个方法：
when()：配置路径和参数;
otherwise：配置其他的路径跳转，衡芹携可以想成default。
when的第二个参数：
controller：对应路径的控制器函数，或者名称
controllerAs：给控制器起个别名
template：对应路径的页面模板，会出现在ng-view处,比如"<div>xxxx</div>"
templateUrl：对应模板的路径，比如"src/xxx.html"
resolve： 这个参数着重说下，该属性会以键值对对象的形式，给路由相关的控制器绑定服务或者值。然后把执行的结果值或者对应的服务引用，注入到控首信制器中。如果resolve中是一个promise对象，咐伏那么会等它执行成功后，才注入到控制器中，此时控制器会等待resolve中的执行结果。
方法有：将pre内部标签进行转译、使用v-html指令。
1、将pre内部标签进行转译：使用>。耐敬来表示大于号（慎亩差>），使用<。来表示小于号（<）。
2、使用v-html指令：宽皮在pre标签内部渲染HTML片段，可以使用v-html指令，将SQL语句作为字符串传递给组件的data属性，并将其绑定到pre标签上。
‘叁’ vue3操作sqlite
vue作为前端，如直接操作sqlite，风险挺大的，比如sql注入，导致数据库炸掉，最终导致你的程序不可用最缓简旅好操作sqlite交给后端去做，后端可以针对前扰凳端用户的操作进行过滤，从而降低风险，也让咐信你的程序更加健壮。
‘肆’ vue字符串匹配问题
纯文本字符串的处理 对于纯文本字符串,如:“江畔何人初见月?江月何年初照人?”,假如我们想匹配“江月”这个关键字,则匹配结果可处理为: 江畔何人初见月?<font style="background: #ff9632">江月font>何年初照人? 这样“江月”两个字被font标签包裹洞携,在font标签上应用特殊的背景样式以达到关键字高亮的效果。 2. 对 HTML字 符串的处理 对于上述例子,如果内容字符串是一个HTML文本: 江畔何人初见<b>月b>?江<b>月b>何年初照人? 对于同样的关键词“江月”,怎样处理它呢?因为关键词中的字在不同的标签内,所以只能分别用font标签进行替换: 江畔何人初见<b>月b>?<font style="background: #ff9632">江font><b><font style="background: #ff9632">月font>b>何年初照人? 这是比较简单的情况,实际情况下拿颤数关键字则可能跨多级、多层标签。 二、跨标签匹配关键词 跨标签解析关键词,其实就是对于匹配到的关键词,提取出各标签中对应的子片段,然后用font之类的标签包裹,再将高亮样式用于font标 签即可。 对于整个HTML内容而言,渲染出来的文本由各类标签内的文本节点组成。因为关键词匹配的内容会跨标签,所以需要将各文本节点有序取 出,并将节消首点内容拼接起来进行匹配。拼接时记下节点文本在拼接串中的起止位置,以便关键词匹配到拼接串的某位置时截取文本片段并使 用font标签包裹。 1. 深度优先遍历 DOM树 取出文本节点
‘伍’ vue项目中，解决开发与线上 请求接口不同的问题
在Vue开发当中经常会遇到各种各样的接口问题,最近在项目蠢老中遇到开发和线上环境接口路径不一样的问题,网上找到很多博客,大多都是千篇一律的复制粘贴,对于新手来说可能比较难以理解,所以我写这篇博客分享给刚使用vue做项目的小萌新同学一个详细的接口配置思路。
webpack提供了生产环境和线上环境的两种配置文件,平时开发当中使用一个接口,项目上线后就会自动切换成另外一个接口,废话不多说,下面上图。首先是找到vue-cli项目中config文件夹下的dev.env.js,默认是下面的样子:
然后我们需要添加开带仔升发环境中使用的请求后台数据的接口域名,如下图:
url_api是我自己设置的,可以自定义。后面的路径就是你自己开发环境中的接口。
接着找到prod.env.js,默认如下图:
在这个文件中同样添加线上请求接口的配置:
最后在自己封戚扒装的axios中去调用这个接口:
自定义变量 = process.env.url_api(这个就是刚才在config两个文件中自定义的),拼接url到封装的axios中。最后在生产环境中npm run dev 的时候会自动调用刚才在dev.env.js中定义的接口,当使用npm run build 去打包的时候会自动调用prod.env.js中配置的接口。
另外:跨域的问题
可能有些小伙伴在vue中配置了跨域的代理,所以导致拼接url中proxy代理失效,依然出现跨域的问题,解决这个问题我的个人思路是代理配置不变,只需要在dev.env.js中用空字符串替换本地接口。就不会出现开发环境中跨域的问题了。有不明白的可以问我,有更好的方案也希望能不吝赐教,谢谢。
链接：https://www.jianshu.com/p/6393cf897663
‘陆’ Vue Router路由传参三种方法及区别
1、梁枝贺第一种方法：拼接方式:
methods：{
handleClick(id) {//直接调用$router.push 实现携带参数的跳转
this.$router.push({path: `/detail/${id}`,})
}
对应路由配置：
{
path:'/detail/:id',
name:'detail',
component: detail
} 获取参数方式： this.$route.params.id
2、第二种方法：params传参 （通过路由属性中的name来确定匹配的路由，通过params来传递参数。）
methods：{
handleClick(id) {
this.$router.push({name:'detail', // 根据name确定匹配路由params: {id: id}})
}
//或者采用router-link前往Detail页面
<router-link :to="{name: 'detail', params: { id: 1 }}">前往Detail页面</router-link>
对应路由配置：
{
path:'/detail/:id',
name:'detail',
component: detail
} 获取搭激参数方式： this.$route.params.id
三、第三种方法：query传参
使用path来匹配路由，然后通过query来传橡派递参数，这种情况下 query传递的参数会显示在url后面?id=？
methods：{
handleClick(id) {
this.$router.push({path:'/detail',query: {id: id}})
}
对应路由配置：
{
path:'/detail',
name:'detail',
component: detail
} //获取参数：this.$route.query.id
四、总结：params和query中的区别
1、接收方式
query传参：this.$route.query.id
params传参：this.$route.params.id
2、路由展现方式
query传参：/detail?id=1&user=123&identity=1&更多参数
params传参：/detail/123
‘柒’ vue传递表单到后端后端使用sql生成数据库表
是。亩拆VUE是iOS和ANDROID平台上的一款Vlog社区与编辑工具，vue传递表单到后端迅旁枣后端使用sql生成数据库表，采用SQL语句进行创启拿建数据库和表，另一种是利用数据库的可视化工具进行创建数据库。
‘捌’ web前端开之网站搭建框架之vue详解
网站搭建框架之vue
Vue是web前端快速搭建网站的框架之一。它与jQuery有所不同，是以数据驱动web界面（以操作数据改变页面，而jQuery是以操作节点来改变页面），同时，vue还实现了数据的双向绑定，可及时响应用户的输入。最主要的是vue的写法简单，容易掌握，组件形式可以大大提高工作效率。
对于vue的使用可以分为两种使用形式：1.引入vue.js文件，在js中将vue实例化；2.通过node安装第三方包--vue，搭建脚手架，用脚手架将页面分成几个组件编写，从而利用组件来搭建页面。
引入vue.js的写法
Vue分为V层（视图层）和M层（数据层），一般都是由M层的数据来驱动V层的改变。而vue的常用指令数量不多且写法简单。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是将数据写进标签内，但它们的不同之处在于v-text会将标签当做文本内容写入
，而v-html则会对标签进行编译，只显示标签内的内容。
至于v-show、v-if、v-else这三个指令都是通过布尔值的判断来执行的，当布尔值为真时，设置了v-show、v-if指令的标签会显示出来，当布尔值为假时，标签隐藏；而v-else与这两个指令相反。除此之外，v-show和v-if、v-else之间也有差别，v-show是改变标签的display属性来使标签显示或隐藏；而v-if、v-else是通过添加或删除节点，来显示或隐藏标签的。
V-for是vue的一种遍历方法，这个方法极大的简化了数组或对象的遍历并显示到页面的步骤
而v-bind：是对html属性或自定义属性的数据驱动方式，格式为v-bind:href，可简写为：href。对于类（class）的操作是通过布尔值来判断增加或者隐藏类，同时。类和样式（style）所接受的数据类型为对象。
V-model指令的作用是将数据进行双向绑定，仅限于输入类型标签。当用户在页面输入时，数据层的数据会跟着改变。这是VM模式。由v驱动m。
除了这些普通的指令之外，还有事件指令v-on:，可简写为@+事件名，例如：@click，并将执行函数写到vue的methods中
通过脚手架来写项目的话，可用通过写组件，再将组件引入（注册）到另一个vue文件里拼接在一起，从而构建出一个页面。
（组件书写格式）
（组件整合）
（注册路由）
路由是通过vue-router来实现的，在注册路由的时候要将router实例化。不同的路由跳转不同的页面，这是搭建单页面应用的优势。
而父组件与子组件之间的通讯可以通过props将父组件的信息传递给子组件，改变子组件的内容，这样子组件的复用就不会有障碍了，而子组件传递信息给父组件或者其他组件的通讯则需vuex。
通过引入vuex并实例化一个Vuex.Store作为一个公共平台，将数据进行传输。通过vue的computed方法接收数据，通过methods方法改变数据。而这个公用平台可以实现组件与组件之间的信息传递，从而实现组件之间的交互。
通过一个星期的实战，深深的体会到了vue的优势，在构建移动端这方面的效率很高。但在搭建的过程中，还是少不了与jQuery结合，毕竟每个工具都有其优点，择其优而用是明智的选择。