vue.js学习笔记

文章目录

前言

一、Vue.js是什么？

二、基础入门

1.引入库

2.声明式渲染

 3.动态绑定

4.条件与循环

5.方法绑定

6.双向绑定

总结

---

前言

出于工作需要，开始学习前端相关的技术，介于公司前端项目是由Vue.js写的，所以开始入手Vue，此文章作于学习记录。

---

一、Vue.js是什么？

参见https://cn.vuejs.org/v2/guide/

二、基础入门

1.引入库

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2.声明式渲染

<div id="app">
  {{ message }}
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>


<!--通过id挂载-->

 3.动态绑定

<div id="app">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

<script>
var app2 = new Vue({
  el: 'app',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})
</script>

<!--v-bind进行强制绑定，缩写 :title=""-->

4.条件与循环

<div>
    <ul>
        <li v-for="i in testlist">
            {{ i }}
        </li>
    </ul>
</div>

<script>
export default {
    data(){
        return{
            testlist: [1,2,3,4]
        }
    }
}
</script>


<!--v-for进行列表遍历-->

<div id="app">
    <p v-if="target==yes">yes</p>
    <p v-else-if="target==no">no</p>
    <p v-else>yes or no</p>
</div>

<script>
    var vm=new Vue({
        el:app,
        data:{
            target:"1234"
        }
    })
</script>

<!--  v-if  v-else-if v-else -->

5.方法绑定

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

<script>
  new Vue({
      el: 'app',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
 })
</script>

<!-- 事件监听v-on 缩写 @click=“” -->

6.双向绑定

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<script>
    var app6 = new Vue({
      el: 'app',
      data: {
        message: 'Hello Vue!'
      }
    })
</script>

<!-- v-model实现标签数据的双向绑定 -->

---

总结

部分代码来自vue的官网

本文原创，转载请注明出处。