vue入门之基本模板语法

avatar 2019年04月27日21:14:56 6 2203 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
上一次学vue还是一年前，当时只是基本了解一下。现在是迫切需要将 blog.liuyanzhao.com 的后台改造成 vue 的，实现前后端分离。这次是真的要撸 vue 了。一步一步学吧！

官方文档

https://cn.vuejs.org/v2/guide/syntax.html



直接在浏览器打开
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Vue入门，基本模板语法</title>
  6.   <script src="https://cdn.bootcss.com/vue/2.5.18/vue.min.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <!-- 1.文本输出 -->
  11.         {{msg}} <br>
  12.         {{count}} <br>
  13.         <!-- 可以进行JavaScript表达式 -->
  14.         {{(count+1)*10}} <br>
  15.         {{msg.split(' ').reverse().join('-')}} <br>
  16.         {{ok ? 'yes' : 'no'}}
  18.         <!-- 2.原生HTML输出 -->
  19.         <div v-html="template"></div>
  21.         <!-- 3.绑定v-bind:xxx，可以省略为:xxx -->
  22.         <a v-bind:href="url">链接</a>
  23.         <a :href="url">链接2号</a>
  24.         <div :id="'user-'+uid"></div>
  26.         <!-- 4.事件 v-on:xxx可以缩写为 @click -->
  27.         <button type="button" v-on:click="like()">点赞</button>
  28.         <button type="button" @click="like()">点赞2号</button>
  29.     </div>
  30.     <script>
  31.         var app = new Vue({
  32.             el: '#app',
  33.             data: {
  34.                 uid: "100001",
  35.                 msg: 'hello vue!!',
  36.                 count: 0,
  37.                 url: "https://liuyanzhao.com",
  38.                 ok: true,
  39.                 template: '<span style="color: red;"><strong>小傻瓜，大笨蛋</strong></span>'
  40.             },
  41.             methods: {
  42.                 like: function() {
  43.                    alert("点赞成功!");
  44.                    this.count++;
  45.                 }
  46.             }
  47.         })
  49.         //可以在浏览器控制台(F12 console)，传值测试
  50.         //如获得uid的值，输入 app.uid；修改uid的值，输入 app.uid=123456
  51.     </script>
  53. </body>
  54. </html>

历史上的今天
四月
27日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0