学习Vue.js

2018年7月4日23:05:54 发表评论 231 阅读

学习Vue.js中,官网提供了Vue.js的各种安装方式,这里就不赘述了。以下,继续钻研中~

声明式渲染

  1. <div id="app">  
  2.   <span style="color:#409EFF;">{{ message }}</span>  
  3. </div>  
  4. <script>  
  1. <script>  
  2. var app = new Vue({  
  3.   el: '#app',  
  4.   data: {  
  5.     message: 'Hello Vue!'  
  6.   }  
  7. })  
  8. </script>  
{{ message }}

动态更新加载时间

  1. <div id="app-2">  
  2.   <span style="color:#409EFF;" v-bind:title="message">  
  3.     鼠标悬停几秒钟查看此处动态绑定的提示信息!  
  4.   </span>  
  5. </div>  
  1. <script>  
  2. var app2 = new Vue({  
  3.   el: '#app-2',  
  4.   data: {  
  5.     message: '页面加载于 ' + new Date().toLocaleString()  
  6.   }  
  7. })  
  8. </script>  

鼠标悬停几秒钟查看此处动态绑定的提示信息!

控制元素是否显示(true-显示|false-隐藏)

  1. <div id="app-3">  
  2.   <p style="color:#409EFF;" v-if="seen">现在你看到我了</p>  
  3. </div>  
  1. <script>  
  2. var app3 = new Vue({  
  3.   el: '#app-3',  
  4.   data: {  
  5.     seen: true  
  6.   }  
  7. })  
  8. </script>  

现在你看到我了

渲染一个列表

  1. <div id="app-4">  
  2.   <ol>  
  3.     <li style="color:#409EFF;"  v-for="todo in todos">  
  4.       {{ todo.text }}  
  5.     </li>  
  6.   </ol>  
  7. </div>  
  1. <script>  
  2. var app4 = new Vue({  
  3.   el: '#app-4',  
  4.   data: {  
  5.     todos: [  
  6.       { text: '学习 JavaScript' },  
  7.       { text: '学习 Vue' },  
  8.       { text: '拥抱开源!' }  
  9.     ]  
  10.   }  
  11. })  
  12. </script>  
  1. {{ todo.text }}

逆转消息

  1. <div id="app-5">  
  2.   <p>{{ message }}</p>  
  3.   <el-button type="primary" v-on:click="reverseMessage">逆转消息</button>  
  4. </div>  
  1. <script>  
  2. var app5 = new Vue({  
  3.   el: '#app-5',  
  4.   data: {  
  5.     message: '蒲公英博客!'  
  6.   },  
  7.   methods: {  
  8.     reverseMessage: function () {  
  9.       this.message = this.message.split('').reverse().join('')  
  10.     }  
  11.   }  
  12. })  
  13. </script>  

{{ message }}

动态绑定输出内容

  1. <div id="app-6">  
  2.   <p style="color:#409EFF;">{{ message }}</p>  
  3.   <input v-model="message">  
  4. </div>  
  1. <script>  
  2. var app6 = new Vue({  
  3.   el: '#app-6',  
  4.   data: {  
  5.     message: 'Hello Vue!'  
  6.   }  
  7. })  
  8. </script>  

{{ message }}

完。


  • 我的微信号
  • 深入交流一下吧
  • weinxin
  • 我的微信公众号
  • 添加公众号了解更多动态
  • weinxin
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛