Vue基础实例

望天吼

已于 2022-08-29 23:06:53 修改

阅读量1.1k

点赞数 3

分类专栏： VUE 文章标签： vue.js 前端 javascript

于 2022-08-29 17:06:26 首次发布

本文链接：https://blog.csdn.net/weixin_45853406/article/details/126527352

版权

VUE 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

Vue引用

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

01.数据绑定{{ }}

想把文字在页面中显示
1.先定义一个data对象(必须叫data)，data就相当于一个数据库
2.data里面有一个对象叫message，当然也可以叫别的
3.获取message的值{{message}}
4.id的值必须跟el的值对应
5.引用必须放在id的这个div内

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>数据绑定</title>
</head>
<body>
<div id="app">
  {{ message }}
</div>

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

在这里插入图片描述

02.动态绑定v-bind

鼠标移动到内容上时，显示页面加载时间
1.new Date().toLocaleString()
根据本地时间把 Date 对象转换为字符串
2.v-bind:title
把所在的元素的 title的值和message这个属性值绑定在一起

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>动态绑定</title>
</head>
<body>

<div id="app">
  <span v-bind:title="message">
    鼠标悬停几秒钟，查看此处动态绑定的提示信息！
  </span>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: '页面加载于' + new Date().toLocaleString()
    }
  })
</script>

</body>
</html>

在这里插入图片描述

03.双向数据绑定v-model

message数据显示在了p标签，input输入内容后，直接改变message，同时改变p标签

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>双向数据绑定</title>
</head>
<body>

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

</body>
</html>

在这里插入图片描述

04.条件渲染v-if

如果满足条件就显示，否则就不显示

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>条件渲染</title>
</head>
<body>

<div id="app">
  <p v-if="active === 0">{{active}}等于0</p>
  <p v-else-if="active > 0">{{active}}大于0</p>
  <p v-else="active < 0">{{active}}小于0</p>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      active: 10
    }
  })
</script>

</body>
</html>

在这里插入图片描述

05.循环遍历(迭代)v-for

数组里面的每一项叫item，当然也可以叫别的名词，i，j，都可以，但items必须要与你需要遍历的对象名对应上，就是date里面的对象。
其实还可以遍历下标，index就是下标，当然也可以叫别的名词，i，j，都可以。

05.1普通数组遍历(迭代)

<div id="app">
  <!-- v-for循环普通数组 -->
  <p v-for="item in items">{{item}}</p>
  <!-- v-for循环普通数组 -->
  <p v-for="(item, index) in items">{{index}}-------{{item}}</p>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      items:[1,2,3,4,5,6,7,8]
    }
  })
</script>

在这里插入图片描述

05.2对象数组遍历(迭代)

遍历users对象，
user就相当于其中一项，
index就相当于其中一项的下标，
user.id就相当于其中一项的id的值，
user.name就相当于其中一项的name的值。

<div id="app">
<!-- v-for循环对象数组 -->
  <p v-for="(user, index) in users">{{index}}，id：{{user.id}}，姓名：{{user.name}}</p>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      users:[
        {id:1,name:"张三"},
        {id:2,name:"李四"},
        {id:3,name:"王五"},
        {id:4,name:"赵六"},
      ]
    }
  })
</script>

在这里插入图片描述

05.3对象遍历(迭代)

遍历student对象，
index就相当于其中一项的下标，
value就相当于id，name，sex，age，class，result，
key就相当于1，张三，男，25，3年2班，100，

<div id="app">
<!-- v-for循环对象 -->
  <p v-for="(value, key, index) in student">{{index}}，{{key}}：{{value}}</p>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      student: {
        id: '1',
        name: '张三',
        sex: '男',
        age: 25,
        group: '3年2班',
        result: 100
      }
    }
  })
</script>

在这里插入图片描述

05.4数字遍历(迭代)

<div id="app">
<!-- v-for迭代数字 -->
  <p v-for="count in 9">这是第{{count}}次循环</p>
</div>

在这里插入图片描述

06.按钮点击事件v-on

按钮点击事件v-on:click，简写@click
执行的动作写在methods下面，this.msg就相当于改变data里面的msg

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>翻转字符串</title>
</head>
<body>

<div id="app">
  <p>{{ msg }}</p>
  <button @click="reverseMsg">翻转字符串</button>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      msg: 'Hello Vue.js!'
    },
    methods: {
      reverseMsg: function () {
        this.msg = this.msg.split('').reverse().join('')
      }
    }
  })
</script>

</body>
</html>

在这里插入图片描述

07.组件component

定义组件的目的是一次封装，多次使用
使用方法：Vue.component(tagName, options)
tagName为组件名，options为配置选项。
在这里插入图片描述

07.1全局组件

所有实例都能用
组件名：diy，组件内容都写在templates里
然后在div里面就可以引用模板了<diy></diy>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>组件</title>
</head>
<body>

<div id="app">
  <diy></diy>
</div>

<script>
  //全局组件
  Vue.component('diy', {
    template: '<h1>自定义组件！</h1>'
  })

  var app = new Vue({
    el: '#app'
  })
</script>

</body>
</html>

07.2局部组件

只能在当前实例使用
定义了两个实例app和ppa，
app实例下有一个diy组件，
ppa实例下有一个yid组件，
在div里可以看出
app实例想要引入yid子组件是无法引入的，同样
ppa实例想要引入diy子组件是无法引入的。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>局部组件</title>
</head>
<body>

<div id="app">
  <diy></diy>
  <yid></yid>
</div>
<hr>
<div id="ppa">
  <diy></diy>
  <yid></yid>
</div>

<script>
  //3.定义app子组件
  var Diy = {
    template:'<div><h1>app实例</h1><h2>子组件diy</h2></div>\''
  }
  //3.定义ppa子组件
  var Yid = {
    template:'<div><h1>ppa实例</h1><h2>子组件yid</h2></div>'
  }
  //1.实例1
  var app = new Vue({
    el: '#app',
    //2.实例1的组件
    components:{
      'diy': Diy
    }
  })
  //4.实例2
  var ppa = new Vue({
    el: '#ppa',
    //5.实例2的组件
    components:{
      'yid': Yid
    }
  })
</script>

</body>
</html>

在这里插入图片描述

07.3组件props

props是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：

在app实例里面有一个全局组件diy，组件的template内通过props属性msg，name进行了双向绑定。
这样的好处是：不用对子组件进行修改，就可以将数据传递给子组件。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>组件props</title>
</head>
<body>

<div id="app">
  <diy msg="Hello," name="Vue!"></diy>
</div>

<script>
  //全局组件
  Vue.component('diy',{
    props:['msg','name'],
    template:'<h1>{{msg}}{{name}}</h1>'
  })
  //根实例
  var app = new Vue({
    el: '#app'
  })
</script>

</body>
</html>

在这里插入图片描述

07.4动态props

感觉有点像双向绑定啊
v-model的数据改变了data，v-bind通过props显示出来，v-bind通过props属性显示了data中的数据
注意：props是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>动态props</title>
</head>
<body>

<div id="app">
  <input v-model="parentMsg">
  <input v-model="parentName">
  <diy v-bind:msg="parentMsg"></diy>
  <diy v-bind:name="parentName"></diy>
</div>

<script>
  //注册全局组件
  Vue.component('diy',{
    props:['msg','name'],
    template:'<h1>{{msg}}{{name}}</h1>'
  })
  //根实例
  var app = new Vue({
    el: '#app',
    data:{
      parentMsg:'父组件Msg',
      parentName:'父组件Name'
    }
  })
</script>

</body>
</html>

在这里插入图片描述

07.5props遍历实例

v-for负责遍历websites每一项（遍历data里面websites的每一项），v-bind通过props传递绑定项，v-bind:web="item"。
所以template里面要写web.site，web.url。
引用组件要写组件名web-list。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>遍历实例props</title>
</head>
<body>

<div id="app">
<ol>
  <web-list v-for="item in websites" v-bind:web="item"></web-list>
</ol>
</div>

<script>
  //全局组件
  Vue.component('web-list',{
    props: ['web'],
    template: '<li>{{web.site}}<br><a v-bind:href="web.url">{{web.url}}</a></li>'
  })
  //根实例
  var app = new Vue({
    el: '#app',
    data:{
     websites:[
       {site:'百度',url:'https://www.baidu.com'},
       {site:'腾讯',url:'https://www.qq.com'},
       {site:'B站',url:'https://www.bilibili.com'}
     ]
    }
  })
</script>

</body>
</html>