Vue.js的一些学习笔记

1.vue基本语法

  1. v-bind单向绑定:
    vue中除了使用插值表达式{{}}渲染数据，还可以使用v-bind来渲染，它的简写的形式就是一个冒号（:）
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
      <!-- 
          v-bind指令
          单向数据绑定
          这个指令一般用于在标签属性中，获取值
       -->
      <!-- <h1 v-bind:title="message">
        {{content}}
      </h1> -->

      <!-- 简写的方式 -->
      <h1 :title="message">
        {{content}}
      </h1>


  </div>
  <script src="vue.min.js"></script>
  <script>
    new Vue({
     el: '#app',
     data: {
      content:'我是标题',
      message:'页面加载与' + new Date().toLocaleString()
   }
 })
 </script>
</body>

</html>
  1. v-model双向绑定：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">

    <!-- 单向绑定 -->
    <input type="text" :value="searchMap.keyword">

    <!-- 双向绑定 -->
    <input type="text" v-model="searchMap.keyword">
    <hr>
    <p>{{searchMap.keyword}}</p>

    <!-- 
        单向绑定修改后只是当前位置会发生数据改变
        双向绑定修改后会将其他所有地方都改变
     -->
  </div>
  <script src="vue.min.js"></script>
  <script>
   new Vue({
     el: '#app',
     data: {
      searchMap:{
          keyword:'陈锦顺'
      }
   }
 })
 </script>
</body>

</html>
  1. 事件：
    使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
      <!-- vue绑定事件 -->
   <button v-on:click="search()">查询结果1</button>
        <!-- vue绑定事件简写 -->
    <button @click="search()">查询结果2</button>

    <p>您要查询的是：{{student.name}}</p>

    <p><a v-bind:href="result.site" target="_blank">{{result.name}}</a></p>
  </div>
  <script src="vue.min.js"></script>
  <script>
   new Vue({
     el: '#app',
     data: {
      student:{
          name :'陈锦顺'
      },
      //查询结果
      result:{

      }
    },
      methods:{
          search() {
              console.log("search...");
              this.result = {
                  "name" : "陈锦顺",
                  "site" : "www.baidu.com"
              }
          }
      }
     
 })
 </script>
</body>

</html>
  1. 修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：即阻止事件原本的默认行为
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
      <!-- v-on:submit.prevent阻止表单提交的默认行为 -->
     <form action="save" @submit.prevent="onsubmit()">
       <!-- 输入值就会双向绑定user中 -->
         <input type="text" id="name" v-model="user.name"> 
         <button type="submit">保存</button>

     </form>
  </div>
  <script src="vue.min.js"></script>
  <script>
   new Vue({
     el: '#app',
     data: {
      user:{}
   },
     methods: {
      onsubmit(){
          if(this.user.name){
              alert("已提交表单")
          }else{
              alert("请输入用户名")
          }

      }
    }
 })
 </script>
</body>

</html>
  1. v-if条件渲染：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
      <!-- v-on:submit.prevent阻止表单提交的默认行为 -->
     <form action="save" @submit.prevent="onsubmit()">
       <!-- 输入值就会双向绑定user中 -->
         <input type="text" id="name" v-model="user.name"> 
         <button type="submit">保存</button>

     </form>
  </div>
  <script src="vue.min.js"></script>
  <script>
   new Vue({
     el: '#app',
     data: {
      user:{}
   },
     methods: {
      onsubmit(){
          if(this.user.name){
              alert("已提交表单")
          }else{
              alert("请输入用户名")
          }

      }
    }
 })
 </script>
</body>

</html>
  1. v-for列表渲染：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
     <ul>
         <li v-for="n in 10"> {{n}} </li>
     </ul>

     <ol>
         <!-- index是从0开始的，n是从1开始 -->
         <li v-for="(n,index) in 10">{{n}} -- {{index}}</li>
     </ol>

     <hr/>
     <table border="1">
         <tr v-for="user in userList">
        <!-- <tr v-for="(user,index1) in userList"> -->
             <td>{{user.id}}</td>
             <td>{{user.username}}</td>
             <td>{{user.age}}</td>
         </tr>

     </table>
  </div>
  <script src="vue.min.js"></script>
  <script>
   new Vue({
     el: '#app',
     data: {
        userList: [
        { id: 1, username: 'helen', age: 18 },
        { id: 2, username: 'peter', age: 28 },
        { id: 3, username: 'andy', age: 38 }
 ]
   },
     methods: {
      
    }
 })
 </script>
</body>

</html>

2.组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
     <Navbar></Navbar>
  </div>
  <script src="vue.min.js"></script>
  <script>
   new Vue({
     el: '#app',
     data: {
      
   },
   // 定义vue使用的组件
     components: {
      //组件的名称
      'Navbar':{
          //组件的内容
          template: '<ul><li>首页</li><li>学员管理</li></ul>'
      }
    }
 })
 </script>
</body>

</html>

3.vue的生命周期

vue的生命周期总的有：
beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。
其中created和mounted较为重要。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
     <button @click="update">update</button>
     <h3 id="h3">{{message}}</h3>
  </div>
  <script src="vue.min.js"></script>
  <script>
   new Vue({
     el: '#app',
     data: {
      message:"床前明月光"
   },
   //在页面渲染之后执行
   mounted(){
       debugger  //在前端打断点
      console.log("mounted...")
   },
   //在页面渲染之前执行(不与代码顺序有关)
   created(){
       debugger
       console.log('created...')
   },
     methods: {
      show(){
          console.log('执行了show方法');
      },
      update(){
        this.message="玻璃好上霜"
      }
    }
 })
 </script>
</body>

</html>

4.路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
Vue.js 路由需要载入 vue-router 库

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
     <h1>Hello App!</h1>
     <p>
         <!-- 使用router-link组件来导航 -->
         <!-- 通过属性 to 指定链接 -->
         <!-- router-link会默认被渲染成一个 <a>标签  -->
         <router-link to="/">首页</router-link>
         <router-link to="/student">学生管理</router-link></router-link>
         <router-link to="/teacher">教师管理</router-link>
     </p>

     <!-- router-view 路由出口 -->
     <!-- 路由匹配到的组件将渲染在这里 -->
     <router-view></router-view>
  </div>
  <!-- 注意这里路由的js文件一定要放在vue的下方！ -->
  <script src="vue.min.js"></script>
  <script src="vue-router.min.js"></script>

  <script> 
//   1.定义组件，可以从其他文件import进来
  const welcome = {template : '<div>欢迎</div></div>'}
  const teacher = {template : '<div>教师列表</div>'}
  const student = {template : '<div>学生列表</div>'}
// 2.定义路由，每个路由应该映射一个组件
  const routes = [
      {path : '/', redirect : '/welcome'},
      {path : '/welcome', component : welcome},
      {path : '/teacher', component : teacher},
      {path : '/student', component : student}
  ]
// 3.创建router实例，然后传routes配置
  const router = new VueRouter({routes})
// 4.创建和挂载根实例，从而让整个y应有都有路由功能
   const app = new Vue({
       el: '#app',
       router
 })
 </script>
</body>

</html>
posted @   夕阳的孤独  阅读(26)  评论(0)  编辑  收藏  举报
相关博文：
· Redis学习笔记
· Nginx学习笔记
· vue学习笔记：vue.js基础语法
· Vue学习
· Vue学习笔记
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示