Vue学习笔记

C15751X

已于 2022-05-30 15:32:06 修改

阅读量482

点赞数

文章标签： vue.js 学习前端

于 2022-05-14 17:22:55 首次发布

本文链接：https://blog.csdn.net/m0_46202211/article/details/124738931

版权

本文介绍了Vue.js的基础知识，包括快速入门、Vue实例的创建与作用范围、指令的使用如内容绑定、事件绑定、显示切换、属性绑定以及列表循环。此外，还讲解了如何使用axios进行网络请求，过滤器的实现，以及如何通过$watch监听属性变化。最后，简述了Vue路由的基本概念和使用方法。

摘要由CSDN通过智能技术生成

1.Vue快速入门

在导入包时选择开发版，更适合学习阶段使用

var app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue!’
}
})

Vue也用到了面向对象思想？实例化，元素等

el称为挂载点，用于设置Vue实例挂载
问题：
Vue的作用范围是哪些？
el命中的元素内部可以被管理，外部不行
是否支持其他选择器？
支持id选择器，类选择器，标签选择器等，但是常用开发只有这三种选择器
是否支持其他元素？
标签都是支持的，但是只支持双标签，因为单标签写不了{{message}}这样两个大括号，除了html和body主体标签

data数据对象
在这里插入图片描述
渲染数组对象：双大括号里campus直接就是整个数组，也可以用下标访问单个元素campus[0]

2.Vue指令

1.内容绑定，事件绑定

在这里插入图片描述

二者区别v-text内容只解析为文本，v-html可以识别出html元素

v-on：为元素绑定事件
在这里插入图片描述
（v-on与@功能完全一样）

补充点：自定义参数函数&事件修饰符

2.显示切换，属性绑定

在这里插入图片描述

v-bind可以直接省略，使用一个冒号

3.列表循环，表单元素绑定

注意item和index,in是关键字
可以使用v-for遍历数组中的多个对象，也可以用于遍历一个对象中的各个属性的值
在这里插入图片描述

.push（）增加元素
.shift（）移除元素
.splice(index,num)从指定位置删除num个元素

v-for循环遍历接收参数顺序（可选）:value,key,index

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

在这里插入图片描述
注意：1、限定表单元素 2、双向绑定

3.网络应用

axios网络请求库
axios与vue结合使用

axios导入方式：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在这里插入图片描述
axios基本使用：

过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下:
过滤器函数接受表达式的值作为第一个参数。以下实例对输入的字符串第一个字母转为大写：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message | capitalize }}
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>
</body>
</html>

过滤器可以串联：

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

这里，message 是第一个参数，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

监听属性

使用$watch监听vue实例中的属性，可以获取该属性变化前和变化后的值

案例1：

<div id = "app">
 <p style = "font-size:25px;">计数器: {{ counter }}</p>
 <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
 var vm = new Vue({
    el: '#app',
    data: {
       counter: 1
    }
 });
 vm.$watch('counter', function(nval, oval) {
    //nval是变化后的新值,oval是变化前的旧值
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
 });
</script>

案例2

	  <div id = "computed_props">
         千米 : <input type = "text" v-model = "kilometers">
         米 : <input type = "text" v-model = "meters">
      </div>
	   <p id="info"></p>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = this.kilometers * 1000
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
         // $watch 是一个实例方法
		vm.$watch('kilometers', function (newValue, oldValue) {
			// 这个回调将在 vm.kilometers 改变后调用
		    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
		})
      </script>

Vue路由

（注意，这里比之前多引入了一个vue-router的外部文件）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

<script>
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = {template:'<a href:'www.baidu.com'></a>'}
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！
</script>
</body>
</html>

C15751X

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记

1.Vue快速入门在导入包时选择开发版，更适合学习阶段使用 {{ message }}var app = new Vue({el: ‘#app’,data: {message: ‘Hello Vue!’}})el称为挂载点，用于设置Vue实例挂载问题：Vue的作用范围是哪些？el命中的元素内部可以被管理，外部不行是否支持其他选择器？支持id选择器，类选择器，标签选择器等，但是常用开发只有这三种选择器是否支持其他元素？标签都是支持的，但是只支持双标签，因为单标签写不了
复制链接

扫一扫