vue的一些零散知识
大体目录如下
- 实例创建
- 属性绑定
- 条件渲染
- 列表渲染
- 事件触发
- class绑定
- 计算属性
- 组件化开发（父子相互传递数据）
- 表单实现
- Tabs
开源源码
一.VUE对象和vue实例
-
如何使用Vue实例开始编写Vue应用程序，以及如何将基本数据加载到网页上。 Vue实例是每个Vue应用程序的根
-
Vue实例插入到DOM中的一个元素中
-
Vue实例的数据可以使用称为表达式的类似于mustache的语法{{}}来显示。（放data然后再处理）
-
Vue是响应式的，原例改变
后面跟着变
二.VUE属性绑定
比如 data我放了product的text和一个image和link，在html页面时候 我就直接{{}}框出文字。
- target的用法
_self相同框架
_top整页
_blank新建一个窗口
_parent父窗口 其它的就是自定义了，可以指向已有的窗口名称
- data可以绑定到html的属性上面去
- v-bind：和：是一样的，：后面放属性
三.条件渲染
- v-if-else和v-show
- 可以在if这些的引号内随意使用表达式
- v-show不会去删改dom的节点属性只是显示和隐藏
我在项目中用以上知识解决了一个条件渲染文字的效果
提出问题———>>如何让文字有条件渲染
VUE的解决方案十分粗暴
data塞入一个Boolean值判断
举一反三
有没有比if-else更粗暴的呢，肯定是有的，比如v-show
由于if -else能够处理我们的业务逻辑了 所以够了
四.列表的渲染
其实就是个循环遍历键值对的问题
- What’d we learn
- The v-for directive allows us to iterate over an array to display data.
- We use an alias for the element in the array being iterated on, and specify the name of the array we are - looping through. Ex:
v-for=“item in items”- We can loop over an array of objects and use dot notation to display values from the objects.
- When using v-for it is recommended to give each rendered element its own unique key.
- data塞入数组
-
循环渲染
-
如果一个这个产品有不同的version该怎么处理呢
-
最后的代码
五.事件处理
- 如下是一个简单的事件绑定——表达式绑定
- 表达式绑定改造成一个函数方法绑定，
- 悬浮鼠标显示图片的实现
六.Class & Style Binding
- 色块对应图片
- 如果条件绑定，前面是class后面的是条件 class： condition
- class绑定时候 你甚至可以绑定一个数据或者对象进去
六.computed property
computed property的意思就是本身并不直接存储值，但是可以通过get和set方法来间接获取或者改变其他property的值。
- 字符串合并
-
如果要操作悬浮的图片，不是通过图片对象，而是下标，先访问键值对
那个selectedvariant传入坐标给它
弄完后 image得换给它的绑定
-
根据true或false控制色块变化
八.组件开发
- 大体的组件内容
- 如果要给用户列入一个会员的权限，那就是要父向子传递数据
九.Communicating Events（子向父传递数据）
- 组件可以让它的父组件知道使用$emit发生了一个事件
- 组件可以使用带有v-on指令(简称@)的事件处理程序侦听事件发射，这可以触发父组件上的方法
- 组件可以在事件发生时发出数据
- 父节点可以使用子节点发出的数据
前面的会触发后面的方法事件
- 如果要传入多个参呢
传入数字其实意义不大 如果要传入ID要怎么操作
十.表单
其实就是要做一个写评论功能
- 我们可以使用v-model指令在表单元素上创建双向绑定
- 我们可以使用.number修饰符来告诉Vue将该值转换为一个数字，但是 它有一个BUG，当value为空时候 自动变为字符串
- 当表单提交时，我们可以使用.prevent事件修饰符来阻止页面重新加载
- 我们可以使用Vue完成相当简单的自定义表单验证
- 注册组件
Vue.component('product-review', {
template: `
<input>
`,
data() {
return {
name: null
}
}
})
- 动态变化的数据 相当于嵌入一个变量（模子）
预留一个填充字符
.prevent是要防止表单提交后刷新页面
十一.Tabs / 评论模块
- 先渲染出来
Vue.component('product-tabs', {
template: `
<div>
<span class="tab" v-for="(tab, index) in tabs" :key="index">{{ tab }}</span>
</div>
`,
data() {
return {
tabs: ['Reviews', 'Make a Review']
}
}
})
渲染的效果如下
如果要点击时候进行跳转tab
- 如果要点击的时候 颜色变亮呢
转载：https://blog.csdn.net/szuwaterbrother/article/details/106028537
查看评论