Electron + Vue + Vscode构建跨平台应用（一）知识点补充
Electron + Vue + Vscode构建跨平台应用（二）Electron + Vue环境搭建
Electron + Vue + Vscode构建跨平台应用（三）利用webpack搭建vue项目
Electron + Vue + Vscode构建跨平台应用（四）利用Electron-Vue构建Vue应用详解
Electron + Vue + Vscode构建跨平台应用（五）Electron-Vue项目源码分析
Electron + Vue跨平台应用（六）效果还不错的登录页面
Electron + Vue跨平台应用（七）基础技法（一）
Electron + Vue跨平台应用（八）基础技法（二）
Electron + Vue跨平台应用（八）基础技法（三）
Electron + Vue跨平台应用（九）基础技法（四）
Electron + Vue跨平台应用（十）可视化（一）
Electron + Vue跨平台应用（十一）可视化（二）
Electron + Vue跨平台应用（十二）可视化（三）
1. v-model
1.1. lazy，trim属性用法
1.2. 属性链式表达
2. v-for 属性
2.1. 动态设置class属性
2.2. 定义过滤器
4. 常用指令
4.1 v-text
4.2 v-html
4.3 v-el和v-ref
4.4 v-cloak指令
trim属性将内容去除首尾空格,注意你在赋值的时候,比如messgae="测试字段 " 时，input并不会显示”测试字段“，而是在input元素失去焦点或者触发input事件的时候才会显示"测试字段”
<template>
<div class="home">
<!-- 用于演示v-model的Number和lazy属性
lazy属性将使input不随lowerCaseMessage变化而变化， 只有在input输入框发生一个blur时才触发
使用修饰符number可以将输入的数据转换为Number类型，否则虽然你输入的是数字，但它的类型其实还是string
trim将内容去除首尾空格,注意你在赋值的时候,比如messgae="测试字段 "时，input并不会显示”测试字段“，而是在失去焦点的时候/触发input事件的时候才会显示"测试字段”
debounce延迟指定毫秒之后更新input内容,已废弃 -->
<input type="text" v-model.trim.lazy="message"><br />
</div>
</template>
<script>
export default {
name: 'BasicActivity',
data () {
return {
message: '这是测试字符 '
}
},
mounted () {
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
v-model.trim.lazy="message"
<template>
<div class="main">
<!--演示 v-ford 的用法-->
<ul>
<li v-for="(item, index) in items" :key="index" :class="className(index)">{{item.name}} - {{item.schoole}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Home',
mounted () {
},
data () {
return {
items: [
{name: '1', schoole: '1'},
{name: '2', schoole: '2'}
]
}
},
methods: {
// 动态设置v-for的类名
className (index) {
// 调用方法，动态生成index
return `v-for_item-${index}`
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
在使用v-for的时候，如果对数组中某个数据做赋值,如this.items[0] = {name: ‘5’, schoole: ‘5’}，视图是不会发生变化的； 但是如果你对某个数据的属性进行修改，如this.items[0].name = ‘5’ 其会触发视图变化, 此时我们可以通过array的push，pop，shift, unshift, splice, sort, reverse等方法来改变数组, 因为在array.js源码中，vue对这些方法中先对数据做了观察（observer）并做了通知(notify)，所以你调用上述方法，会触发一次notify
在2.0版本前,在使用v-for的时候，我们可以配合使用filterBy、orderBy来对内容进行相应的过滤和排序； 在2.0中我们可以通过计算属性实现1.0搜索过滤器等功能,举例： 如此处的使用计算属性过滤和name内容匹配的内容<template>
<div class="main">
<input type="text" v-model="name">
<ul>
<li v-for="(user, index) in newUsers" :key="index">
{{ user.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Home',
mounted () {
},
data () {
return {
name: '',
users: [
{ name: 'Bruce' },
{ name: 'Chuck' },
{ name: 'Jackie' },
{ name: '赵' }
]
}
},
computed: {
newUsers: function () {
var that = this
return that.users.filter(function (user) {
// 该过滤器的作用是: 根据name的值过滤出users中为name的数组
return user.name.toLowerCase().indexOf(that.name.toLowerCase()) !== -1
})
}
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
- 我们现在一个js文件中定义需要的过滤函数，并导出
// 在./utils/CustomFilter.js文件定义全局过滤器
// 定义变量,export来导出
const filterByName = name => {
if (name.length > 0) {
let temp = [{name: '5', schoole: '5'}]
return temp
}
return null
}
export default{
filterByName
}
- 在main.js中注册全局过滤器
import CustomFilter from './utils/CustomFilter'
Object.keys(CustomFilter).forEach(key => {
console.log('测试全局过滤', CustomFilter)
Vue.filter(key, CustomFilter[key])
})
- 在其他模块中引用
<p>{{message | filterByName}}</p>
<p v-text="message"></p>
// 等同于
<p>{{message}}</p>
<p v-html="htmlcontent"></p>
htmlcontent: '<h1>这是一个标题</h1>'
效果如下
ref和el都是用于为元素注册一个索引，只不过在Vue2.0中弃用了v-el,v-rel指令
在2.0中如果需要此功能要通过ref属性来解决； 注意不是ref:属性名, 而是ref=“属性名”，然后通过$refs获取元素即可；
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例；
<div ref="menuWrapper">elsample</div>
则其使用的时候如下
let elObject = this.$refs.menuWrapper
console.log('打印v-el的用法', elObject)
你会发现打印的内容即为元素本身，如下图
cloak中文含义为披风，那这个v-cloak的含义是保持和元素实例的关联，直到结束编译后自动消失；
举个例子说明这个属性的作用，如下代码是想显示段落p内容为v-cloak使用说明，但是在网络条件不好的情况下，会显示为{{vCloak}}；
<p >{{vCloak}}</p>
vCloak: 'v-cloak使用说明'
为了解决这个问题，我们可以给p标签添加v-cloak指令，并在css样式表中对其设置display：none的属性，这样当元素加载完毕之后，v-clock命令自然失效，段落元素就显示出来了； 完整代码如下
<p v-cloak>{{vCloak}}</p>
<style scoped>
/* 在样式表里：如果有有 v-cloak 属性的标签，可以设置为不显示
当Vue实例化完毕以后，v-cloak 会自动消失，那么对应的css样式就会失去作用，最终将p中的内容呈现出来 */
[v-cloak] {
display: none;
}
</style>
props主要运用于父子组件之间传递值，因为vue是单向数据流，组件实例的作用域是孤立的，所以不能在子组件的内直接修改父组件通过prop传递给子组件的值，如果出现修改会出现如下警告
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value.
因为vue在大小写上面的不敏感性，props在传递参数的时候，我们应该注意到驼峰命名，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名；举例说明：
// 子组件中定义了一个props
props: ['titleMessage']
那么在父组件传递props的时候应该这样使用
<child :title-message='ifrmeTitle'></child>
我们可以以数组的形式来指明props,也可以通过花括号的方式详细定义某一个传递的对象
// 已数组的形式粗略定义一个props
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
用花括号的形式详细定义一个props
props: {
title: {
tyep: String,
required: true
}
},
当我们想对props实现双向绑定要如何处理尼？即通过子组件来修改父组件传递过来的值
- 方法一： 在子组件中通过如下方式给父组件发送一个通知，然后父组件监听setOnClickListen方法，就可以修改传递的值了；其中viewId是子组件传递给父组件的值
// 子组件给父组件发送一个广播
this.$emit('setOnClickListen', viewId)
// 父组件监听setOnClickListen方法，当收到子组件的广播的时候，父组件的clickListen方法被触发
<cus-tom-button :title='ifrmeTitle' v-on:setOnClickListen="clickListen(0)"></cus-tom-button>
2: 方法二：官方推荐使用一种update:my-prop-name 的模式来替代事件触发，目的是为了优雅而不粗鲁的实现父子组件间的双向绑定！
// 子组件使用update更改传递的props即isshow
this.$emit('update:isshow', viewId)
父组件则需要使用sync属性来接收子组件的改变
<cus-tom-button :isshow.sync='ifrmeTitle' v-on:setOnClickListen="setOnClickListen(0)">
扫一扫
2838
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
