1.Vue基础(@事件名+v-show+created+v-bind)

Vue基础

一.Vue简介

1.定义：

javaScript渐进式框架，方便操作页面的数据，显示数据

2.特点：

• 响应式编程，页面的数据和js的数据是互相绑定的，当其中一个值发生变化，对应的值也会变化
• 组件化，可以把页面元素功能封装起来(java的方法)

3.建立vue程序步骤

1. 引入vue.js文件

    <!-- 引入js文件 -->
   <!--
   第一步：引入vue.js文件
   第二步：在body中定义div容器，并且绑定id
   作用
   （展示数据）
   第三步：定义vue对象作用(定义数据，操作数据)
   写vue的目的：定义数据，操作数据，显示数据
   -->
     <script src="../js/vue.js"></script>
   

2. html>>body中声明元素

    <div id="app">
           <!-- 插值表达式{
        {属性名}},直接获取的是数据第一级的 -->
           {
       {name}}
           <span>{
       {person.id}}</span>
           <!-- 三元表达式 ,sex==1就是男,否则就是其他-->
           <h3>{
       {person.sex==1?"男":"其他"}}</h3>
           <!-- 通过下标索引拿到具体对象>>属性 -->
           <h3>{
       {cars[0].engine}}</h3>
    </div>
   

3. script标签内声明vue对象

   <script>
       // 申明一个数组array
       let arr = [{
           name: "arrn", age: 18 }, {
           name: "jerry", age: 19 }]
       console.log(arr[1].name);//通过下标获取具体数组内容
       // 申明一个对象
       let obj = {
          
           id: 1,
           name: "Arran",
           age: 18
       }
       console.log(obj.name);
       // 控制台输出
       console.log(1111);
       new Vue({
          
           el: "#app", //element指定vue对象操作的元素
           data: {
          //声明数据
               name: "hello!!!",
               person: {
          
                   id: 1,
                   name: "arran",
                   age: 18,
                   sex: 1
               },
               cars: [{
           brand: "大众", engine: "200cc" }]
           },
           methods: {
          //定义方法,操作数据
   
           }
       })
   </script>
   

vue对象作用域范围: Array, object,string…

二.Vue的常用指令

​ this指向vue对象

1.v-text和v-html

<div v-html="sex1"></div>

• v-text:更新数据内容,直接更新文本

  sex1:"女"
  //输出女
  

• v-html: 替换文本同时会解析html标签

   sex1: '<span style="color: red">男</span>'
  //输出: 男(红色)
  

2.v-show和v-if显示和隐藏数据

• v-show是css样式控制display
• v-if是删除dom元素

 <div id="app">
        <!-- v-show="flag" 属性值为true则显示否隐藏 -->
        <!-- v-show和v-if区别: 1.show使用css样式隐藏,适用频繁调用;2.if使用注释删除 -->
        <img