vue入门之基本模板语法

上一次学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'}}
  17.         <!-- 2.原生HTML输出 -->
  18.         <div v-html="template"></div>
  19.         <!-- 3.绑定v-bind:xxx,可以省略为:xxx -->
  20.         <a v-bind:href="url">链接</a>
  21.         <a :href="url">链接2号</a>
  22.         <div :id="'user-'+uid"></div>
  23.         <!-- 4.事件 v-on:xxx可以缩写为 @click -->
  24.         <button type="button" v-on:click="like()">点赞</button>
  25.         <button type="button" @click="like()">点赞2号</button>
  26.     </div>
  27.     <script>
  28.         var app = new Vue({
  29.             el: '#app',
  30.             data: {
  31.                 uid: "100001",
  32.                 msg: 'hello vue!!',
  33.                 count: 0,
  34.                 url: "https://liuyanzhao.com",
  35.                 ok: true,
  36.                 template: '<span style="color: red;"><strong>小傻瓜,大笨蛋</strong></span>'
  37.             },
  38.             methods: {
  39.                 like: function() {
  40.                    alert("点赞成功!");
  41.                    this.count++;
  42.                 }
  43.             }
  44.         })
  45.         //可以在浏览器控制台(F12 console),传值测试
  46.         //如获得uid的值,输入 app.uid;修改uid的值,输入 app.uid=123456
  47.     </script>
  48. </body>
  49. </html>

 

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
言曌

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: