没有合适的资源?快使用搜索试试~ 我知道了~
前言:文章不介绍任务背景知识,没有原理说明,偏向于实践的总结和经验分享。 文章所有的代码是基于Vue CLI 3.x版本,不会涉及到一步步通过Webpack来配置JSX所需要的知识点。 在使用Vue开发项目时绝大多数情况下都是使用模板来写HTML,但是有些时候页面复杂又存在各种条件判断来显示/隐藏和拼凑页面内容,或者页面中很多部分存在部分DOM结构一样的时候就略显捉襟见肘,会写大量重复的代码,会出现单个.vue文件过长的情况,这个时候我们就需要更多的代码控制,这时候可以使用渲染函数。 渲染函数想必平时几乎没有人去写,因为写起来很痛苦(本人也没有写过)。更多的是在Vue中使用JSX语法。写法上
资源详情
资源评论
资源推荐
Vue中中jsx不完全应用指南小结不完全应用指南小结
前言:文章不介绍任务背景知识,没有原理说明,偏向于实践的总结和经验分享。
文章所有的代码是基于Vue CLI 3.x版本,不会涉及到一步步通过Webpack来配置JSX所需要的知识点。
在使用Vue开发项目时绝大多数情况下都是使用模板来写HTML,但是有些时候页面复杂又存在各种条件判断来显示/隐藏和拼
凑页面内容,或者页面中很多部分存在部分DOM结构一样的时候就略显捉襟见肘,会写大量重复的代码,会出现单个.vue文
件过长的情况,这个时候我们就需要更多的代码控制,这时候可以使用渲染函数。
渲染函数想必平时几乎没有人去写,因为写起来很痛苦(本人也没有写过)。更多的是在Vue中使用JSX语法。写法上和在
React中差不多,但是功能上还是没有React中那么完善。
在写JSX的过程中不得考虑一个样式的问题,虽然可以直接在.vue文件中不写<tempate>部分,只写<script>和<style>部分,
而不用担心样式作用域问题。但是更多的时候还是推荐直接使用.js的方式来写组件,这个时候就涉及到样式作用域的问题了。
在React的生态中,有很多CSS-IN-JS的解决方案,比如styled-jsx、emotion、styled-components等,目前最活跃和用户量最
多的是styled-components,目前已经拥有良好的生态圈子。如果需要在样式中作一些像Sass/Less中的颜色计算,可以使用
polished来实现,当然不止这么简单的功能。但是在Vue中可使用的方案就太少了,因为Vue使用模板来写HTML本身是开箱即
用的样式scoped,在使用JSX写组件的时候就面临着样式问题,一种方案是在组件包裹<div>中取一个特殊的名字,然后样式
都嵌套写在这个class下面,但是难免会遇到命名冲突的情况,而且每次还得变着花样取名称。此外,就是引入CSS-IN-JS在
Vue对应的实现,但目前来看Styled-components官方提供了一个Vue版本的叫vue-styled-components和emotion的vue-
emotion,但是用的人实在太少。像styled-components进行了重大更新和变化,但是Vue版本的还是最初的版本,而且有时候
还出现样式不生效的情况。
接下来进入正题,从简单语法到经验分享(大牛请绕行)
基本用法基本用法
首先需要约定一下,使用JSX组件命名采用首字母大写的驼峰命名方式,样式可以少的可以直接基于vue-styled-components
写在同一个文件中,复杂的建议放在单独的_Styles.js_文件中,当然也可以不采用CSS-IN-JS的方式,使用Less/Sass来写,
然后在文件中import进来。
下面是一个通用的骨架:
import styled from 'vue-styled-components'
const Container = styled.div`
heigth: 100%;
`
const Dashboard = {
name: 'Dashboard',
render() {
return (
<Container>内容</Container>
)
}
}
export default Dashboard
插值插值
在JSX中使用单个括号来绑定文本插值
<span>Message: {this.messsage}</span>
<!-- 类似于v-html -->
<div domPropsInnerHTML={this.dangerHtml}/>
<!-- v-model -->
<el-input v-model={this.vm.name} />
在jsx中不需要把v-model分成事件绑定和赋值二部分分开来写,因为有相应的babel插件来专门处理。
样式样式
在JSX中可以直接使用class=”xx”来指定样式类,内联样式可以直接写成style=”xxx”
<div class="btn btn-default" style="font-size: 12px;">Button</div>
<!-- 动态指定 -->
<div class={`btn btn-${this.isDefault ? 'default' : ''}`}></div>
<div class={{'btn-default': this.isDefault, 'btn-primary': this.isPrimary}}></div>
<div style={{color: 'red', fontSize: '14px'}}></div>
遍历遍历
在JSX中没有v-for和v-if等指令的存在,这些全部需要采用Js的方式来实现
{/* 类似于v-if */}
{this.withTitle && <Title />}
{/* 类似于v-if 加 v-else */}
{this.isSubTitle ? <SubTitle /> : <Title />}
{/* 类似于v-for */}
{this.options.map(option => {
<div>{option.title}</div>
})}
事件绑定事件绑定
事件绑定需要在事件名称前端加上on前缀,原生事件添加nativeOn
<!-- 对应@click -->
<el-buton onClick={this.handleClick}>Click me</el-buton>
<!-- 对应@click.native -->
<el-button nativeOnClick={this.handleClick}>Native click</el-button>
<!-- 传递参数 -->
<el-button onClick={e => this.handleClick(this.id)}>Click and pass data</el-button>
注意:如果需要给事件处理函数传参数,需要使用箭头函数来实现。如果不使用箭头函数那么接收的将会是事件的对象event
属性。
高级部分高级部分
在Vue中基于jsx也可以把组件拆分成一个个小的函数式组件,但是有一个限制是必需有一个外层的包裹元素,不能直接写类
似:
const Demo = () => (
<li>One</li>
<li>Two</li>
)
必需写成:
const Demo = () => (
<div>
<li>One</li>
<li>Two</li>
</div>
)
而在React中可以使用空标签<></>和<react.Fragment></react.Fragment>来实现包裹元素,这里的空标签其实只是
react.Fragment的一个语法糖。同时在React 16中直接支持返回数组的形式:
const Demo = () => [
<li>One</li>
<li>Two</li>
]
那么在Vue中就只能通过遍历来实现类似的功能,大体思路就是把数据先定义好数据然后直接一个map生成,当然如果说元素
的标签是不同类型的那就需要额外添加标识来判断了。
{
data() {
return {
options: ['one', 'two'] }
},
render() {
const LiItem = () => this.options.map(option => <li>{option}</li>)
return (
<div>
<ul>
<LiItem />
</ul>
</div>
)
}
}
事件修饰符事件修饰符
在基础部分简单介绍了事件的绑定用法,这里主要是补充一下事件修饰符的写法。
在模板语法中Vue提供了很多事件修饰符来快速处理事件的冒泡、捕获、事件触发频率、按键识别等。可以直接查看官方文档
的事件&按键修饰符部分,这里把相关内容原样搬运过来:
修饰符修饰符 前缀前缀
.passive &
.capture !
.once ~
.capture.once或.once.capture ~!
使用方式如下:
<el-button {...{
'!click': this.doThisInCapturingMode,
'!keyup': this.doThisOnce,
'~!mouseover': this.doThisOnceInCapturingMode
}}>Click Me!</el-button>
下面给出的事件修饰符是需要在事件处理函数中写出对应的等价操作
修饰符修饰符 处理函数中的等价操作处理函数中的等价操作
.stop event.stopPropagation()
.prevent event.preventDefault()
.self if (event.target !== event.currentTarget) return
按键: .enter, .13
if (event.keyCode !== 13) return (对于别的按键修饰符来说,可将 13 改为另一个按键
码)
修饰键: .ctrl, .alt, .shift, .meta if (!event.ctrlKey) return (将 ctrlKey 分别修改为 altKey、shiftKey 或者 metaKey)
下面是在事件处理函数中使用修饰符的例子:
methods: {
keyup(e) {
// 对应`.self`
if (e.target !== e.currentTarget) return
// 对应 `.enter`, `.13`
if (!e.shiftKey || e.keyCode !== 13) return
// 对应 `.stop`
e.stopPropagation()
// 对应 `.prevent`
e.preventDefault()
// ...
}
}
ref和和refInFor
在Vue中ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使
用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件。
剩余10页未读,继续阅读
weixin_38626928
- 粉丝: 2
- 资源: 949
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0