Vue 的入门代码

目录

Vue是什么？

Vue特点

Vue代码

创建第一个Vue应用

双向数据绑定

目前v-model可使用元素有:

v-for

v-if（v-else）

v-show

Vue变异方法

总结

---

Vue是什么？

Vue是一套用于构建用户界面的渐进式javaScript框架。

Vue是简单的应用：只需一个轻量小巧的核心库。并可以引入格式各样的Vue插件适应复杂应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue特点

1.采用组件化模式，提高代码复用率、且让代码更好维护

2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。

3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

---

Vue代码

创建第一个Vue应用

<div id="app">
    <div>{{msg}}</div>
  </div>
<!--区域块-->
<script>
//初始化Vue
  new Vue({
    el:"#app",//#就是id
    data:{//数据
      msg:'Hello Vue'
    }
  });
</script>
<!--以上为基本模板
实例参数分析
el:元素的挂载位置(值可以是CSS选择器或者DOM元素)
data:模型数据(值是一个对象)
-->

双向数据绑定

既然是双向绑定,一定是在视图中可以修改数据,数据可以改视图。

目前v-model可使用元素有:

i nput

select

tex tarea

checkbox

radio componentes(vue中自定义组件)

<!--div就是视图，data就是数据-->
<div id="app">
  <!--v-model  指令标签 双向绑定-->
  <input type="checkbox" value="Java" v-model="language">Java</br>
  <input type="checkbox" value="PHP" v-model="language">PHP</br>
  <input type="checkbox" value="Python" v-model="language">Python</br>
  <input type="checkbox" value="Go" v-model="language">Go</br>
  <hr>
  <h2>
    <!--{{}} 插值表达式   获取显示的数据
插值表达式用法
将数据填充到HTML标签中
插值表达式支持基本的计算操作-->
    你选择了：{{language.join('/')}}<!--.join('/')数组以/分割输出-->
  </h2>
</div>
<script>
  new Vue({
    el:"#app",
    data:{
      language:[]
    }
  });
</script>

v-on指令用于给页面元素绑定事件 。

在没有使用vue之前；页面标签可以通过设置onXXX响应事件；在vue中可以通过v-on指

令响应事件。

<div id="app">
  <!--v-on 专门处理事件  有v-on时 可以用@简写-->
  <input type="text" value="失去焦点事件" v-on:blur="open()"></br>
  <input type="text" value="失去焦点事件2" @blur="open()"></br>
</div>
<script>
  new Vue({
    el:"#app",
    methods:{//在 methods 方法中访问 data 的数据，可以直接通过 this.属性名 的形式来访问
      show(){
        alert("我被点了")
      },
      open(){
        alert("我失去焦点了")
      },
    }
  });
</script>

v-for

v-for指令语法实现对数组、对象的遍历

<div id="app">
<!--a别名 in固定 addr数组名  遍历数组-->
  <div v-for="a in addr">
    {{a}}
  </div>
  <hr>
<!--i为元素下标 从0开始-->
  <div v-for="(a,i) in addr">
    {{i+1}}==={a}
  </div>
  <hr>
  <div v-for="user in users">
    {{user.name}}--
    {{user.age}}--
    {{user.gender}}--
  </div>
  <hr>
  <div v-for="(user,index) in users">
    {{index+1}}
    {{user.name}}
    {{user.age}}
    {{user.gender}}
  </div>
  <hr>
  <div v-for="(user,key,index) in users">
    {{index+1}}-{{key}}
    {{user.name}}
    {{user.age}}
    {{user.gender}}
  </div>
  <hr>
</div>
<script>
  new Vue({
    el:"#app",
   data:{
      addr:["北京","上海","长春"],//字符串
     users:[//对象数组
       {"name":"张三","age":16,"gender":"男"},
       {"name":"李四","age":26,"gender":"女"},
       {"name":"王五","age":18,"gender":"男"}
     ]
   }
  });
</script>

v-if（v-else）

<div id="app">
  <!--选择-->
  <div v-for="user in users" v-if="user.gender=='男'" style="background:deeppink">
    {{user.name}}--
    {{user.age}}--
    {{user.gender}}--
  </div>
  <hr>
  <div v-for="user in users" v-else="user.gender=='女'" style="background:blue">
    {{user.name}}--
    {{user.age}}--
    {{user.gender}}--
  </div>
  <hr>
</div>
<script>
  new Vue({
    el:"#app",
   data:{
      addr:["北京","上海","长春"],//字符串
     users:[//对象数组
       {"name":"张三","age":16,"gender":"男"},
       {"name":"李四","age":26,"gender":"女"},
       {"name":"王五","age":18,"gender":"男"}
     ]
   }
  });
</script>

v-show

与if不同show，v-if在条件不满足的时候元素不会存在；v-show条件不满足的时候只是对元素进行隐藏。

<div id="app">
  <button @click="show=!show">点我</button>
  <h2 v-if="show"> HELLO VUE</h2>

</div>
<script>
  new Vue({
    el:"#app",
  data:{
      show:true
  }
  });
</script>

Vue变异方法

<div id="app">
  <input v-model="pname"><button @click="add">增加</button>
  <li v-for="item in lists">
    {{item}}<button @click="del">删除</button>
  </li>
</div>
<script>
  new Vue({
    el:"#app",
    data:{
      pname:"",
      lists:['zhangsan','lisi','wangwu']
    }

push():添加元素

methods:{
      add(){
        this.lists.push(this.pname)
      }

pop() :删除元素

del(){
        this.lists.pop(this.pname)
      }

splice(index,1):根据index删除数组中一个元素

 this.lists.splice(index,1)

sort():排序元素

reverse():反转元素

---

总结：

Vue很有趣很简洁上手很快，深度很深。

---