Vue简单入门（持续更新）

worlt

已于 2024-08-09 00:25:21 修改

阅读量514

点赞数 11

文章标签： vue.js 前端 javascript

于 2024-08-05 11:41:18 首次发布

本文链接：https://blog.csdn.net/worlt/article/details/140911118

版权

注：内容仅供参考，如有不同或错误可随时联系

安装

安装node.js环境

IDE：vscode：安装插件Vetur、open in browser、Live Server，创建Vue项目

webstorm：直接创建Vue项目

把vue.js看做一个函数库，导入程序（每个Vue项目都要导入）

插值表达式

把data里面的数据用 {{}} 传输到页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    }
  })
</script>
</body>
</html>

指令

v-bind：改变属性

元素的属性值可动态改变，不能用{{}}绑定

标准写法: <元素 v-bind:属性名=“js表达式”>

v-bind可省略，但是:不能省略

<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<div id="app">
  <div>
    <button :title = "mytitle">按钮</button>
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data:{
      mytitle : "修改title"
    }
  });
</script>
</body>

v-show：控制元素的隐藏显示

根据程序中的变量值控制一个元素显示隐藏

语法: <元素 v-show="js条件">

原理: new Vue()扫描到v-show时，自动执行js条件，如果条件为true，则该元素原样显示。否则如果js条件执行结果为false，则new Vue()自动为当前元素加display:none，隐藏。

<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<div id="app">
  <div>
    <button @click = "show">显示</button>
    <button @click = "hide">隐藏</button>
    <span v-show = "flag">显示隐藏标签</span>
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data:{
      flag : true
    },
    methods:{
      show:function () {
        this.flag = true;
      },
      hide:function () {
        this.flag = false;
      }
    }
  });
</script>
</body>

v-if（v-else）：控制元素的隐藏显示

上例中v-show可直接换成v-if，但是原理不同：v-if在扫描时，如果条件为true，则保留该元素。否则如果条件为false，则删除该元素！

对比: v-show vs v-if

–v-show 采用display:none方式隐藏元素，不改变DOM树，效率高！（频繁修改可用）

–v-if 采用添加删除元素方式控制元素显示隐藏，可能频繁修改DOM树，效率低！

<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<div id="app">
  <div>
    <button @click = "show">已注册</button>
    <button @click = "hide">未注册</button>
    <span v-if = "flag">登录</span>
    <span v-else>注册</span>
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data:{
      flag : true
    },
    methods:{
      show:function () {
        this.flag = true;
      },
      hide:function () {
        this.flag = false;
      }
    }
  });
</script>
</body>

事件

事件指令v-on

标准写法:元素： <元素 v-on:事件名=“处理函数()”>

简写：<元素 @事件名=“处理函数()”>，如不需要传参可省略()

可参照上面 v-if 的 @click

双向绑定

既能将data中的变量值自动同步到HTML页面中，又能将页面上的修改自动同步回data变量中。

(data <===> div#app)

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 和 input 事件；

<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <div id="app">
    <input v-model="message">
    <p>{{ message }}</p>
    <p>{{ message + "哈哈哈" }}</p>
  </div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: ''
    }
  })
</script>
</body>

checkbox 和 radio 使用 checked 和 change 事件；

例：多个复选框，绑定到同一个数组

<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <div id="app">
    <input type="checkbox" id="jack" value="Jack" v-model="checkname">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkname">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkname">
    <label for="mike">Mike</label>
    <p>{{ checkname }}</p>
  </div>
<script>
  new Vue({
    el: '#app',
    data: {
      checkname : []
    }
  })
</script>
</body>

select 字段使用 value 和 change 作为事件

例：选择框单选时

<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <div id="app">
    <p>您选择的是：{{ selected }}</p>
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
  </div>
<script>
  new Vue({
    el: '#app',
    data: {
      selected: ''
    }
  })
</script>
</body>

注：如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。
在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步.

<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <div id="app">
    <input v-model="message">
    <p>Message is : {{ message }}</p>
  </div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: '默认值'
    }
  })
</script>
</body>

.number

•如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符.
•这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。
•如果这个值无法被 parseFloat() 解析，则会返回原始的值。

<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <div id="app">
    <input v-model.number = "num" type="number">
    <p>{{ num }}</p>
  </div>
<script>
  new Vue({
    el: '#app',
    data: {
      num: 0
    }
  })
</script>
</body>

.trim

•如果要自动过滤用户输入的首位空白字符，可以给 v-model 添加 trim 修饰符.

<body>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <div id="app">
    <input v-model.trim = "message">
    <p>Message is : {{ message }}</p>
  </div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: '',
    }
  })
</script>
</body>

计算属性和侦听属性（入门使用频率较少）

计算属性

有些值，总是可以根据其他属性值的变化动态计算获得，每次绑定属性时，都需要根据其他属性的值动态计算获得该属性的属性值，这样的值，就没必要在程序中再保存一份。主要用于同步。

计算属性的值会被缓存，只有当它的依赖数据发生变化时才会重新计算。这有助于提高性能。

语法：计算属性，虽然本质是一个函数，但是在HTML中绑定语法中使用时，不要加 ()

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter。

method和watch异同：可以将同一函数定义为一个方法而不是一个计算属性，两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要被依赖数据还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。

<body>
<div id="app">
  <div>  {{total1()}}  </div>
  <div>  {{total2}}  </div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      num: 10,
      price: 10,
    },
    methods: {
      total1: function () {
        return this.num * this.price
      }
    },
    computed: {
      total2: function () {
        return this.num * this.price
      }
    }
  })
</script>
</body>

侦听属性

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

watch是一个对象，可以看作对象使用，是对象就有键，有值。

键：是需要监听的目标，可以是data中的某个变量。

值：a) 值可以是函数：就是当你监听的变量发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是更新后的值。 b) 值可以是函数名：不过函数名要使用单引号来标注。 c)值可以是选项中的对象：选项包括有三个。第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。第二个是deep：其值是true或false；确认是否深入监听。（一般用来监听一个对象里面的值）。第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

<body>
<div id="app">
  <table>
    <tr>
      <td>
        <input id="" v-model="price" name="" type="number">
      </td>
      <td>
        <input id="" v-model="num" name="" type="number">
      </td>
    </tr>
  </table>
  <p>{{price * num}}</p>
  <p>{{tot}}</p>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      price: 99,
      num: 2,
      tot: 0
    },
    watch: {
      price: function (newVal, oldVal) {
        this.tot = newVal * this.num;
        console.log("price newer" + newVal + "---older" + oldVal);
      },
      num: function (newVal) {
        this.tot = this.price * newVal;
        console.log("num" + newVal);
      }
    }
  });
</script>
</body>