慢慢来,是种诚意,加载中 . . .

vue基础学习笔记


vue学习笔记整理

vue基础学习,终于在每天的忙碌中整理自己的笔记

1.什么是vue?

渐进式 JavaScript 框架 大量数据渲染的页面

优点:

轻量级,体积小是一个重要指标。

Vue.js 压缩后有只有 20多kb (Angular 压缩后 56kb+,React 压缩后 44kb+) 移动优先。

更适合移动端,比如移动端的 Touch 事件 易上手,学习曲线平稳,文档齐全 吸取了 Angular(模块化)和 React(虚拟 DOM)的长处,并拥有自己独特的功能,如:计算属 性 开源,社区活跃度高。

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。

Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定组合的视图组件

但在使用Vue过程中页面中不要在引入Jquery框架

2.Vue安装

声明式渲染

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统:

2.0 了解MVVM模式

MVVM(Model-View-ViewModel)是一种软件架构设计模式,由微软 WPF(用于替代 WinForm,以 前就是用这个技术开发桌面应用程序的)和 Silverlight(类似于 Java Applet,简单点说就是在浏览器上 运行的 WPF) 的架构师 Ken Cooper 和 Ted Peters 开发,是一种简化用户界面的事件驱动编程方式。

MVVM 模式和 MVC 模式一样,主要目的是分离视图(View)和模型(Model),有几大好处:

  • 低耦合: 视图(View)可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的 View 上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变。
  • 可复用: 你可以把一些视图逻辑放在一个 ViewModel 里面,让很多 View 重用这段视图逻辑。
  • 独立开发: 开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页 面设计。
  • 可测试: 界面素来是比较难于测试的,而现在测试可以针对 ViewModel 来写。

2.1 下载Vuejs

  • 独立版本

直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。重要提示:在开发时请用开发版本,遇到常见错误它会给出友好的警告。

注意:开发环境不要用最小压缩版,不然就失去了错误提示和警告!

//开发版本:
	<!-- 开发环境版本,包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//生产版本:
	<!-- 生产环境版本,优化了尺寸和速度 -->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 Vue第一个demo案例

总结:

1.vue实例(对象)中el属性: 代表Vue的作用范围 日后在Vue的作用范围内都可以使用Vue的语法

2.vue实例(对象)中**data**属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在Vue作用范围内取出

3.在使用{{}} `插值表达式进行获取data中数据时,可以在`{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等

4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器 注意: el属性值不能指定body或html标签

vue的实例周期

3.vue常用指令

3.1 v-text

v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部 类似于javascript 中 innerText

- 总结
		1.{{}}(插值表达式)和v-text获取数据的区别在于 
			a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据
			b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁

3.2 v-html

v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部 类似于javascript中 innerHTML,双大括号会将数据解释为纯文本,而非 HTML 。为了输出真正的 HTML ,你需要使用 v-html 指令:

被插入的内容都会被当做 HTML —— 数据绑定会被忽略。注意,你不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元。

v-text和v-html的区别

 一、v-text

  用于渲染普通文本,无论何时,绑定的数据对象上 msg属性发生了改变,插值处的内容都会更新。

<span v-text=``"message"``></span>``<!-- 简写方式 -->``<span>{{message}}</span>
export default { data () { return { message: "这里可以包含html标签" } } }

 二、v-html

 如果你想输出真正的 HTML,你需要使用 v-html指令,v-text仅渲染标签,不能解析 HTML 代码。

总结:- v-text{{}}表达式渲染数据,不解析标签。

   - v-html不仅可以渲染数据,而且可以解析标签。 

   


4.vue中事件绑定(v-on)

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

4.1 绑定事件基本语法案例

- 总结:
		事件  事件源:发生事件dom元素  事件: 发生特定的动作  click....  监听器  发生特定动作之后的事件处理程序 通常是js中函数
		1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如  v-on:click
		2.在v-on:事件名的赋值语句中是当前事件触发调用的函数名
		3.在vue中事件的函数统一定义在Vue实例的methods属性中
		4.在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据

4.2 Vue中事件的简化的语法

  • 总结:

日后在vue中绑定事件时可以通过@符号形式 简化 v-on 的事件绑定,语法糖的形式:@

4.3 Vue事件函数两种写法

- 总结:
			1.在Vue中事件定义存在两种写法  一种是 函数名:function(){}  推荐    一种是  函数名(){} 推荐

4.4 Vue事件参数传递

总结:

1.在使用事件时,可以直接在事件调用出给事件进行参数传递,在事件定义出通过定义对应变量接收传递的参数

5.常用指令

5.1 v-show

v-show:用来控制页面中某个标签元素是否展示 底层使用控制是 display 属性

- 总结
			1.在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏
			2.在v-show中可以通过boolean表达式控制标签的展示和隐藏

5.2 v-if

v-if: 用来控制页面元素是否展示 底层控制是DOM元素 操作DOM

  • v-if
  • v-else-if
  • v-else
# demo1
<div id="app">
    <h2 v-if="false">hello vue </h2>
    <h2 v-if="show">生活自由出口!!!</h2>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            show:false
        },
        methods:{

        }
    });
</script>

#demo2

<body>
<div id="app">
<!--
=== 三个等号在 JS 中表示绝对等于(就是数据与类型都要相等)
-->
<h1 v-if="type === 'A'">A</h1>
<h1 v-else-if="type === 'B'">B</h1>
<h1 v-else-if="type === 'C'">C</h1>
<h1 v-else>who</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
var vm = new Vue({
el: '#app',
data: {
type: 'A'
}
})
</script>
</body>

5.3 v-bind

v-bind: 指令带有前缀 v- ,以表示它们是 Vue 提供的特殊特性。用来绑定标签的属性从而通过vue动态修改标签的属性

<div id="app">
    <img width="300" v-bind:title="msg" v-bind:class="{aa:showCss}"  src="1.jpg" alt="">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
        el:"#app",
        data:{
            msg:"我的logo!!!!",
            showCss:true,
        },
        methods:{
        }
    })
</script>

5.4 v-bind 简化写法

​ vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 v-bind:属性名 简化之后 :属性名 也叫做语法糖。

<div id="app">
    <img width="300" :title="msg" :class="{aa:showCss}"  :src="src" alt="">
    <input type="button" value="动态控制加入样式" @click="addCss">
    <input type="button" value="改变图片" @click="changeSrc">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
        el:"#app",
        data:{
            msg:"我的logo!!!!",
            showCss:true,
            src:"https://codecheng-1305009997.cos.ap-chengdu.myqcloud.com/img/20210501222811.webp"
        },
        methods:{
            addCss(){
                this.showCss= !this.showCss;
            },
            changeSrc(){
                this.src = "https://codecheng-1305009997.cos.ap-chengdu.myqcloud.com/img/20210501222811.webp";
            }
        }
    })
</script>

6.v-for的使用

语法格式:

<div id="vue">
<li v-for="item in items">
{{ item.message }}
</li>
</div>

注:items 是数组,item是数组元素迭代的别名。和Thymeleaf模板引擎的语法和这个十分的相似!

v-for: 作用就是用来对对象进行遍历的(数组也是对象的一种)

<div id="app">

    <span>{{ user.name }} {{ user.age }}</span>
    <br>
    <!--
       通过v-for遍历对象
    -->
    <span v-for="(value,key,index) in user">
        {{index}} : {{key}} : {{value}}
    </span>

    <!--
        通过v-for遍历数组
    -->
    <ul>
        <li v-for="a,index in arr" >
            {{index}} {{a}}
        </li>
    </ul>

    <!--
        通过v-for遍历数组中对象
        :key 便于vue内部做重用和排序
    -->
    <ul>
        <li v-for="user,index in users" :key="user.id">
            {{index+1}} {{ user.name }}  === {{ user.age }} ==== {{ user.content }}
        </li>
    </ul>

</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user:{name:"codecheng",age:20},
            arr:["北京", "上海", "广州"],
            users:[
                {id:"1",name:"codecheng",age:20,content:"我还是从当前的那个少年!"},
                {id:"2",name:"小Dai~",age:18,content:"我曾经是一个坏坏的的少年!"},
            ]
        },
        methods: {}
    });
</script>
# 总结
	1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key 

7 .v-model 数据双向绑定(核心)

Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发 生变化的时候,数据也会跟着同步变化。这也算是 Vue.js 的精髓之处。

值得注意的是,我们所说的数据双向绑定,一定是对于 UI 控件来说的,非 UI 控件不会涉及到数据双向 绑定。对于我们处理表单,Vue.js 的双向数据绑定用起来就特别舒服了。

你可以用 v-model 指令在表单 < input>、< textarea> < select> 元元素上创建双向数据绑定。它 会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它 负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

v-model的作用是用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制

<div id="app">
    <input type="text" v-model="message">
    <span>{{message}}</span>
    <hr>
    <input type="button" value="改变Data中值" @click="changeValue">
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message:""
        },
        methods: {
            changeValue(){
                this.message='codecheng!';
            }
        }
    });
</script>
- 总结
		1.使用v-model指令可以实现数据的双向绑定 
		
		2.所谓双向绑定 表单中数据变化导致vue实例data数据变化   vue实例中data数据的变化导致表单中数据变化 称之为双向绑定
		

多复选框:

<body>
<div id="app">
多复选框:
<input type="checkbox" id="jack" value="Jack" vmodel="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" vmodel="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" vmodel="checkedNames">
<label for="mike">Mike</label>
<span>选中的值: {{ checkedNames }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
new Vue({
el: '#app',
data: {
checkedNames: []
}
})
</script>
</body>

8.事件处理器

8.0事件修饰符

修饰符: 用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

9.方法事件处理器

许多事件处理的逻辑都很复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。

示例:

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // -> 'Hello Vue.js!'

内联处理器方法

除了直接绑定到一个方法,也可以用内联 JavaScript 语句:

<div id="example-3">
  <button v-on:click="say('小Dai~')">Say 小Dai</button>
  <button v-on:click="say('ck_cheng')">Say ck_cheng</button>
</div>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法:

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

10事件修饰符

- 1.常用的事件修饰符
	.stop    停止
	.prevent 阻止
	.self    独自
	.once    一次
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

10.1 stop修饰符

用来阻止事件冒泡

<div id="app">
    <div class="aa" @click="divClick">
        <!--用来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">
    </div>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {},
    methods: {
      btnClick(){
        alert('button被点击了');
      },
      divClick(){
        alert('div被点击了');
      }
    }
  });
</script>

10.2 prevent 事件修饰符

用来阻止标签的默认行为

<!--用来阻止事件的默认行为-->
<a href="https://www.codecheng.com/" @click.prevent="aClick">codecheng</a>

10.3 self 事件修饰符

用来针对于当前标签的事件触发 ===========> 只触发自己标签的上特定动作的事件 只关心自己标签上触发的事件 不监听事件冒泡

<!--只触发标签自身的事件-->
<div class="aa" @click.self="divClick">
  <!--用来阻止事件冒泡-->
  <input type="button" value="按钮"  @click.stop="btnClick">
  <input type="button" value="按钮1" @click="btnClick1">
</div>

10.4 once 事件修饰符

once 一次作用: 就是让指定事件只触发一次

<!--
.prevent : 用来阻止事件的默认行为
.once    : 用来只执行一次特定的事件
-->
<a href="https://www.codecheng.com/" @click.prevent.once="aClick">codecheng的博客</a>

10.5 按键修饰符

作用: 用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符

在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

全部的按键别名:

  • enter
  • tab
  • delete (捕获 “删除” 和 “退格” 键)
  • esc
  • space
  • up
  • down
  • left
  • right

可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

11组件

11.0 什么是组件?

组件是可复用的 Vue 实例,说白了就是一组可以重复使用模板,跟 JSTL 的自定义标签、 Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

11.1使用 Vue.component() 方法注册组件:

<body>
	<div id="app">
		<ul>
			<!-- 有点类似自定义标签 -->
			<my-component-li>
			</my-component-li>
		</ul>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
	</script>
	<script>
		// 注册组件
		Vue.component('my-component-li', {
			template: '<li>Hello vue</li>'
		});
		// 实例化 Vue
		var vm = new Vue({
			el: '#app'
		});
	</script>
</body>
  • Vue.component():注册组件
  • my-component-li:自定义组件的名字
  • template:组件的模板

11.2构成组件

父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项 声明 “prop”:

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样,prop 可以用在模板html内
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})

然后向它传入一个普通字符串:

<child message="hello!"></child>

动态 Props

类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件:

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

使用 v-bind 的缩写语法通常更简单:

<child :my-message="parentMsg"></child>

12.vue计算属性

计算属性

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时,就会更加难以处理。

对于任何复杂逻辑,你都应当使用计算属性

12.0计算属性的用法

在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果就可以。

我们把上面的例子用计算属性的方式重写一下

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>  //我们把复杂处理放在了计算属性里面了
</div>
var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        reversedMessage: function () {
            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
});

demo:

<body>
	<div id="app">
		<!--注意,一个是方法,一个是属性-->
		<p>
			调用当前时间的方法:{{currentTime1()}}
		</p>
		<p>
			当前时间的计算属性:{{currentTime2}}
		</p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
	</script>
	<script>
		var vue = new Vue({
			el: '#app',
			data: {
				message: 'Hello Vue'
			},
			methods: {
				currentTime1: function() {
					return Date.now();
				}
			},
			computed: {
				//currentTime2 ,这是一个属性!不是方法
				currentTime2: function() {
					this.message;
					return Date.now();
				}
			}
		})
	</script>
</body>

注意methodscomputed 里的东西不能重名

  • methods:定义方法,调用方法使用 currentTime1(),需要带括号;
  • computed:定义计算属性,调用属性使用 currentTime2,不需要带括号;this.message 是为了 能够让 currentTime2 观察到数据变化而变化;
  • 如果在方法中的值发生了变化,则缓存就会刷新!可以在控制台使用 vm.message=”” 改变下数据的值,再次测试观察效果!

总结:

  • 调用方法时,每次都需要进行计算
  • 将这个结果缓存起来,采用计算属性可以很方便的做到这一点
  • 计算属性的主 要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销;

13.插槽

在 Vue 中我们使用 元素,作为承载分发内容的出口,作者称其为 插槽,可以应用在组合组 件的场景中;

在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slotslot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC

13.0 什么是插槽

插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。

1、在子组件中放一个占位符

<template>
    <div>
        <h1>今天天气状况:</h1>
        <slot></slot>
    </div>
</template>
<script>
    export default {
        name: 'child'
    }
</script>

2、在父组件中给这个占位符填充内容

<template>
    <div>
        <div>使用slot分发内容</div>
        <div>
            <child>
                <div style="margin-top: 30px">晴朗,最高气温29度,最低气温19度,微风</div>
            </child>
        </div>
    </div>
</template>
<script>
    import child from "./child.vue";
    export default {
        name: 'father',
        components:{
            child
        }
    }
</script>

vue 的基础先到这里啦 每天都要有进步呀!!!


评论
  目录