旅游公司网站 优帮云,嘉兴做网站建设的公司哪家好,陕西新站seo,百度权重5的网站能卖多少钱目录 引言一、页面动态插值1. 一般用法 二、计算属性computed三、动态class、style绑定四、条件渲染与列表渲染五、事件处理六、表单输入绑定七、总结 引言 本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容#xff0c;并不… 目录 引言一、页面动态插值1. 一般用法 二、计算属性computed三、动态class、style绑定四、条件渲染与列表渲染五、事件处理六、表单输入绑定七、总结 引言 本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容并不代表这部分内容不重要只是对于初学者来说没必要一开始就学的面面俱到。我希望可以先通过主干内容带大家入门前端细节技巧性内容可以在后续的开发工作中自行发现并掌握。 在上一篇 【vue2.0入门】vue单文件组件 中我们已经对vue单文件各个部分做了解释本篇将通过几个例子对常用vue语法进行讲解。
详细的vue语法内容参考vue2语法教程 一、页面动态插值 在template中以 {{ 表达式 }} 的形式将一个表达式的结果以文本形式动态插入页面标签中。 一般情况下这个表达式可以是
data中定义的变量props中从父组件传入的属性computed中对data变量或是props属性加工后的表达式
1. 一般用法
仍然使用 HelloWorld 组件按照 【vue2.0入门】vue单文件组件 中介绍的vue2代码片段初始化一个vue组件模板。
templatediv classcontainerdiv classitemspan父组件传值/spanspan{{ msg }}/span/divdiv classitemspan系统内存/spanspan{{ memorySize }} B/span/divdiv classitemspan系统内存格式化方式1/spanspan{{ (memorySize / 1024 / 1024 / 1024).toFixed(2) }} GB/span/divdiv classitemspan系统内存格式化方式2/spanspan{{ memorySizeFormat }} GB/span/divdiv classitemspan引用类型属性为空/spanspan{{ sysInfo.cpu || AMD }} /span/divdiv classitemspan引用类型属性不存在/spanspan{{ sysInfo.gpu || NVIDIA }} /span/div/div
/templatescript
export default {props: {msg: {type: String,default: hello world!,},},data() {return {memorySize: 8589935000,sysInfo: {cpu: ,},};},// 计算属性computed: {memorySizeFormat() {return (this.memorySize / 1024 / 1024 / 1024).toFixed(2);},},
};
// 其他代码
/script
如上代码中
系统内存格式化方式1 和 系统内存格式化方式2 的插值我用了两种方式表达的意思是一样的。插值符号中可以利用变量编写表达式最后呈现表达式执行结果的字符串形式当表达式过于复杂时可以考虑使用computed加工一下变量。computed就像是一个加工车间输入的是data或是props的变量输出一个表达式结果。 memorySizeFormat 就表示一条产品线它等价于 (this.memorySize / 1024 / 1024 / 1024).toFixed(2) 这个生产过程的结果。当前组件的全局都可以通过 this.memorySizeFormat 访问到这个结果。当需要向template插入的值取自一个 sysInfo 的属性然而这个属性值为空或是不存在时可以使用 || 符号添加默认值使页面位置不为空。
效果如下 二、计算属性computed 在页面动态插值部分我们已经展示了computed的基础使用方法。 在一些特殊情况下computed并不依赖于data变量或是props变量而是接收一个传入的参数做计算具体写法如下 // 计算属性computed: {memorySizeParams(){return (params){return (params / 1024 / 1024 / 1024).toFixed(2);}}},我们在 template 中可以按照函数传参的方式来调用这里把 memorySize 作为参数传入函数内部返回处理后的结果用于页面插值渲染。 div classitemspan系统内存格式化方式3/spanspan{{ memorySizeParams(memorySize) }} GB/span/div三、动态class、style绑定 class的绑定主要是对一个 自定义class名 做一个是否为 真 的判断style的绑定主要是对 css属性名 赋予动态的 属性值 。 写法上只需要在原有的class和style属性名前加上冒号 : 即可例如 :class 、 :style 。此时这两个属性的值需要是一个表达式而不是确定的值。表达式可以是变量可以是计算属性的返回值也可以是通过代码运算后得到的值
对于class的绑定
多个类的动态绑定我会采用对象形式可以在data中设置对象变量属性名为你需要设置的 class名属性值为Boolean用于判断当前class名是否授予这个标签。在style中也要提前编写好对应 class名 的样式类。你同样可以把这个对象直接搬到标签中这和你使用data中的对象是等价的。需要要注意的是 双引号 和 单引号 的嵌套关系避免一些报错。当你需要动态添加单个class类那可以不加 大括号 {}直接编写表达式需要该表达式最终返回一个class名。我这里用了一个 三元运算符 返回一个确定的class名感兴趣的百度一下这个运算符用法。
对于style的绑定
和class的区别就是style的绑定主要是对一个确定css属性赋予动态的值。通过表达式获取一个合规的css属性值。
templatediv classcontainer!-- 动态class --div classmainclass :classadditionalClass动态class测试/divdivclassmainclass:class{ customBg: customStr world, customColor: customNum 1 }动态class测试/divdivclassmainclass:classcustomStr world ? customBg : customColor动态class测试/div!-- 动态style --div classmainclass :styleadditionalStyle动态style测试/divdivclassmainclass:style{background: customBackground,color: customColor,}动态style测试/divdiv classmainclass :style{ color: customNum 1 ? red : blue }动态style测试/div/div
/templatescript
export default {data() {return {//动态classadditionalClass: {customBg: true,customColor: false,},customNum: 1,customStr: hello,// 动态styleadditionalStyle: {background: yellow,color: blue,},customBackground: yellow,customColor: blue,};},};
/script
style scoped
.mainclass {margin-top: 20px;
}.customBg {background: #f8a5d4;
}.customColor {color: #0ade0d;
}
/style
观察对比开发者工具中标签属性和代码理解下动态绑定的过程 四、条件渲染与列表渲染 这两个语法在官网中有着较为详尽的介绍参考条件渲染 、列表渲染 本篇针对列表渲染与条件渲染嵌套使用时如何处理。 这个问题常发生在一些场景中例如从后端拿到了一组原始数据数据中有个 A属性 代表该数据是否渲染。我们一般做法是提前根据这个 A属性 对数据进行筛选然后在进行列表渲染避免列表渲染和条件渲染同时使用。
举个例子
templatediv classcontainer!-- 列表渲染 --div classmainclass v-foritem in handleFruits :keyitem.id{{ item.name }}/div/div
/templatescript
export default {data() {return {// 列表渲染Fruits: [{ id: 1, name: 苹果, visible: true },{ id: 2, name: 香蕉, visible: false },{ id: 3, name: 橙子, visible: true },{ id: 4, name: 桃子, visible: false },],};},// 计算属性computed: {handleFruits() {return this.Fruits.filter((item) item.visible);},},};
/script 五、事件处理 关于vue2的事件处理语法建议参考事件处理 本篇介绍一些需要注意的地方
在官方文档中绑定事件的方法为 v-on: 日常工作中使用简写方式 例如click如果你需要在事件处理器中访问原生事件对象可以使用 $event 关键字作为参数传入调用的方法中。 div clickhandleClick($event)六、表单输入绑定 关于vue2的表单输入绑定语法建议参考表单输入绑定 本篇介绍一些需要注意的地方
表单输入绑定主要用于需要用户输入信息或者选择信息的标签主要是这三种 input 、textarea 及 select 。 七、总结
以上即为vue基础语法的内容建议从官方文档入手结合本篇介绍的需要注意的点一起学习。
本篇重点
再次熟悉 表达式 这个概念了解 computed 的传参用法掌握列表渲染与条件渲染嵌套使用时的应对方法。vue的一些语法简写
接下来我们将学习vue工程引入第三方库进行数据获取、路由配置、全局状态管理等。
再接再厉~
