基础语法指令

声明

本文为多位博主原创文章整合，仅用作个人学习，特此声明

参考文章链接：

狂神vue笔记（全）__路漫漫其修远的博客-CSDN博客_狂神vue笔记

Vue.js 教程 | 菜鸟教程 (runoob.com)

1、基础语法指令

1.1 v-bind

我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似， 但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联， 所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新! 我们还可以使用v-bind来绑定元素特性!

  • 数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值
  • HTML 属性中的值应使用 v-bind 指令

以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - v-bind(runoob.com)</title>
</head>
<style>
.class1{
  background: orange;
  color: blue;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>
</body>

在以上代码中我们需要注意：在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

运行结果

我们在这里看到的v-bind等被称为指令。指令带有前缀v以表示它们是Vue提供的特殊特性。可能你已经猜到了， 它们会在渲染的DOM上应用特殊的响应式行为在这里，该指令的意思是：“将这个元素节点的title特性和Vue实例的message属性保持一致”。如果你再次打开浏览器的JavaScript控制台，输入app，message=‘新消息’，就会再一次看到这个绑定了title特性的HTML已经进行了更新。

1.2 v-model

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - v-model(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})
</script>
</body>
</html>

1.3 v-if v-else

1、if...else

<!DOCTYPE html>
 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <!--view层，模板-->
 <div id="app">
     <h1 v-if="ok">Yes</h1>
     <h1 v-else>No</h1>
    
 </div>
 <!--1.导入Vue.js-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
 <script type="text/javascript">
     var vm = new Vue({
         el:"#app",
         /*Model：数据*/
         data:{
             ok: true
         }
     });
 </script>
 </body>
 </html>

在控制台输入vm.ok=false然后回车

需要注意：使用v-*属性绑定数据是不需要双花括号包裹的

2、else if

注：三个等号在JS中表示绝对等于(就是数据与类型都要相等)

练习代码

<!DOCTYPE html>
 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
 <head>
     <meta charset="UTF-8">
     <title>Vue 测试实例 - else if</title>
 </head>
 <body>
 <!--view层，模板-->
 <div id="app">
     <h1 v-if="type==='A'">A</h1>
     <h1 v-else-if="type==='B'">B</h1>
     <h1 v-else-if="type==='D'">D</h1>
     <h1 v-else>C</h1>
 </div>
 <!--1.导入Vue.js-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
 <script type="text/javascript">
     var vm = new Vue({
         el:"#app",
         /*Model：数据*/
         data:{
             type: 'A'
         }
     });
 </script>
 </body>
 </html>

1.4 v-for

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

1、v-for 迭代数组

1、v-for 可以绑定数据到数组来渲染一个列表

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - v-for迭代数组(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>
</body>
</html>

2、可以在模板中使用 v-for

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - v-for(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <template v-for="site in sites">
      <li>{{ site.name }}</li>
      <li>--------------</li>
    </template>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>
</body>
</html>

2、v-for 迭代对象

1、v-for 可以通过一个对象的属性来迭代数据

  • 可以提供第二个的参数为键名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - v-for迭代对象(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>
</body>
</html>

  • 可以提供第三个参数为索引
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - v-for迭代对象(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}--- {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>
</body>
</html>

3、v-for 迭代整数

v-for 也可以循环整数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - v-for迭代整数(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app'
})
</script>
</body>
</html>

4、一个小知识

可以在控制台追加数据

比如在上边的 [迭代数组](###1、v-for 迭代数组) 例子中追加数组元素

vm.sites.push({name:'Baidu'})

1.5 v-on

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

以下实例在用户点击按钮后执行方法

this在方法里面指向当前Vue实例

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue 测试实例 - v-on</title>
</head>
<body>

<div id="app">
    <p>{{message}}</p>
    <button v-on:click="sayHi">点击此处执行方法</button>
</div>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:'Hello World'
        },
        methods:{
            sayHi:function(event){
                //'this'在方法里面指向当前Vue实例
                alert(this.message);
            }
        }
    });
</script>
</body>
</html>

运行结果

posted @   无关风月7707  阅读(47)  评论(0)  编辑  收藏  举报
相关博文：
·  表单双向数据绑定、组件
·  我的第一个Vue程序
·  Vue基础语法
·  Vue的入门——基本语法（上）
·  🍑Vue-Study
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae