网站建设开发报价表,多少钱一斤怎么算,北京天通苑 做网站,北京王府井附近景点攻略点击观看视频课程 ↓↓↓微信小程序首页完善https://www.zhihu.com/video/1195308096099282944课程文字版1、template 部分#xff08;1#xff09;修改template部分的代码template里面包含html代码#xff0c;对应着原生小程序框架里中的.wxml文件。我们将index.vue文件中…点击观看视频课程 ↓↓↓微信小程序首页完善https://www.zhihu.com/video/1195308096099282944课程文字版1、template 部分1修改template部分的代码template里面包含html代码对应着原生小程序框架里中的.wxml文件。我们将index.vue文件中的template部分的代码修改成下面的代码templatedivdiv classshowdiv classmark-text当前分数/divdiv classmark{{mark}}/div/divdiv classrowdiv classright button clickaddMark(1) 1/divdiv classleft button clickaddMark(-1)- 1/div/divdiv classrowdiv classright button clickaddMark(5) 5/divdiv classleft button clickaddMark(-5)- 5/div/div/div
/template2在template/标签下只能有一个子节点元素html的所有代码必须包含在一个 html 标签中如果写多个如div/这样的标签则会报错如下所示正确示例template
divdiv//html页面代码/div
/div
/template错误示例template
div//html页面代码
/div
div//html页面代码
/div
/template3双大括号{{ }}div classmark{{mark}}/div双大括号{{ }}会将数据解释为普通文本而非 HTML 代码。里面一般包裹的是vue.js的变量或者方法这些变量、方法要先在script里面定义4点击事件clickdiv classright button clickaddMark(1) 1/divclick是v-on:click的缩写是给html标签添加的点击事件addMark(1)是在script里面的method对象中定义的方法2、script 部分1修改script部分的代码script里面包含js代码对应着原生小程序框架里中的.js文件。我们将index.vue文件中的script部分的代码修改成下面的代码scriptexport default {data () {return {mark: 0}},methods: {addMark (add) {//this.mark 0 1this.mark this.mark addconsole.log(mark,this.mark) }}}
/script2data对象data里面定义的是数据我们在这里定义了mark并赋值为0。在 template中通过{{mark}}来使用数据。在script的methods对象中通过this.mark来使用数据data () {return {mark: 0}
}data 选项必须是一个函数不然vue实例之间可能会相互影响。比如像下面这样定义就是错误的~data: { mark: 0
}3methods对象methods对象里面定义的是vue的方法也可以说是函数。比如下面代码就表示我们自定义了一个叫 addMark 的方法函数。add是addMark方法的参数在template中通过click调用的addMark(1)就是将add参数作为1此时mark 0 1 变成了1console.log语句是可以将结果打印到微信开发者工具中的控制台我们一般用来测试。methods: {addMark (add) {//this.mark 0 1this.mark this.mark addconsole.log(mark为,this.mark) }
}3、style 部分script部分比较简单里面包含css代码对应着原生小程序框架里中的.wxss文件。就是将template里出现的html元素加一些样式。我们将index.vue文件中的script部分的代码修改成下面的代码。1安装sass插件我们在style标签中加入langscss用来支持scss语言的运行环境。如果没有安装sass插件启动npm run dev会报错我们先打开终端安装一下scss插件//打开项目目录
~$ cd WeChatProjects/truth_hold//在项目目录中安装sass插件
~/WeChatProjects/truth_hold$ npm install sass-loader node-sass --save-dev
scss可以看成是css的扩展语言比css更加简洁灵活。即使你是css零基础也可以直接学习scss。2添加样式代码style langscss
.show{text-align:center;height:266px;background: #EA5149;margin-bottom:5px;color: #FFFFFF;font-weight:bold;.mark-text{font-size: 20px;padding:28px;}.mark{font-size: 88px;}
}
.row{margin: 40px 56px;.button{width: 70px;height: 70px;line-height:70px;border-radius: 20%;border: none;text-align:center;font-size: 25px;color:#FFFFFF;font-weight:bold;}
}
.right{background:#EA5149;float: right;
}
.left{background:#feb600;margin-right:80px;
}
/styleVue官方文档https://cn.vuejs.org/v2/guide/如果以前没有接触过vue可能看到vue代码会有点懵建议花点时间看一下vue 的官方文档对vue有一个大概的认识不然下面的学习可能会比较困难。4、测试效果先在项目目录中运行npm run dev~/WeChatProjects/truth_hold$ npm run dev在微信开发者工具中点击加减按钮会看到以下效果5、index.vue代码示例最后将index.vue文件中的代码贴出来大家对比一下自己添加的是否正确templatedivdiv classshowdiv classmark-text当前分数/divdiv classmark{{mark}}/div/divdiv classrowdiv classright button clickaddMark(1) 1/divdiv classleft button clickaddMark(-1)- 1/div/divdiv classrowdiv classright button clickaddMark(5) 5/divdiv classleft button clickaddMark(-5)- 5/div/div/div/template
scriptexport default {data () {return {mark: 0}},methods: {addMark (add) {//this.mark 0 1this.mark this.mark addconsole.log(mark为,this.mark)}}}
/scriptstyle langscss
.show{text-align:center;height:266px;background: #EA5149;margin-bottom:5px;color: #FFFFFF;font-weight:bold;.mark-text{font-size: 20px;padding:28px;}.mark{font-size: 88px;}
}
.row{margin: 40px 56px;.button{width: 70px;height: 70px;line-height:70px;border-radius: 20%;border: none;text-align:center;font-size: 25px;color:#FFFFFF;font-weight:bold;}.right{background:#EA5149;float: right;}.left{background:#feb600;margin-right:80px;}
}
/style关注【猫宁一】公众号回复【课件】领取课程PPT和小程序源码B站可以1.5倍加速观看视频课程微信小程序实战开发课程【提供源码】实际上线项目 mpvuekoa2_哔哩哔哩 (゜-゜)つロ 干杯~-bilibiliwww.bilibili.com
