vue 基础语法 条件判断 循环 事件绑定dom节点

前言:虽然做过一些vue项目但是实际上对vue还是一知半解，能写但是知识没有成体系，总结一下相关的知识

基本特点

1.dom节点和数据双向绑定，所见即所得
2.数据驱动，让开发只需要关注数据
3.内部使用组件化，很方便导入第三方已经开发好的模块
4.代码部分相当精简，对比jquery可以节省大量代码就能完成相同功能
5.项目管理比较方便，有完善的框架比较容易上手

基础语法

 1. 条件判断

 2. 循环

 3.事件绑定dom节点

<template>
    <div>
      <input type="text" v-model="name"></input>
      {{name}}

      <!-- vue 条件语句 -->
      <p v-if="show1">111</p>
      <p v-if="!show1">222</p>
      <!-- vue 循环 -->
      <ol>
        <li v-for="site in sites">
          {{ site.name }}
        </li>
      </ol>
      <!-- vue 事件绑定节点 -->
      
      <button v-on:click="$alert('22222')">22222</button>
      <button v-on:click="test()">22222</button>
    </div>
</template>
<script>
export default {
  name: "test",
  data(){
    return {
      name:"",
      user: "11111",
      test(){
        alert("test")
      },
      show1:false,
      sites: [
        { name: 'Runoob' },
        { name: 'Google' },
        { name: 'Taobao' }
      ]
    }
  }
}
</script>

<style scoped>

</style>