vue学习笔记二:vue开发基础上

一、vue实例

1、 创建vue实例

vue学习笔记二:vue开发基础上_第1张图片

<script>
var vm=new Vue({
     
//选项
})
</script>

通过对象(选项)定义多个属性
vue学习笔记二:vue开发基础上_第2张图片
vue学习笔记二:vue开发基础上_第3张图片

二、el唯一根标签
在这里插入图片描述

  • tips:vs code中,对HTML页面结构初始化方法为:先输入!然后按tab键。(这样就省事太多了)
    操作步骤:
1.引入vue.js
2.定义一个div
3.实例化vue
4.将数据显示到界面上
//下面是代码
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
head>
<body>
    <div id="app">
        {
    {name}}
        <p>
            {
    {name}}
        p>
    div>
    <script>
        var vm = new Vue({
       
            el:'#app',//el选项 通过el将VM与div绑定,接收的是字符串
            //通过el将vue实例与div进行绑定,绑定之后,vue就可以操作div及其子元素,并且数据也可以显示在div内部。
            data:{
       
                name:'vue实例绑定成功'//data数据
            }
        });
    script>
body>
html>

vue学习笔记二:vue开发基础上_第4张图片
3、data初始数据
在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
head>
<body>
    <div id="app">
        <p>{
    {name}}p>
    div>
    <script>
        var vm=new Vue({
       
            el:'#app',
            data:{
       
                name:"定义初始数据"
            }
        });
        console.log(vm.$data.name)
        console.log(vm.name)//同第一类写法,第一类更繁琐
    script>
body>
html>

vue学习笔记二:vue开发基础上_第5张图片
4、methods定义方法
vue学习笔记二:vue开发基础上_第6张图片
在methods选项中定义showInfo()方法,实现页面内容的更新:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
head>
<body>
    <div id="app">
         <button @click="showInfo">请单击button>
         <p>{
    {msg}}p>
    div>
    <script>
        var vm=new Vue({
       
            el:'#app',
            data:{
       
               // msg:''
                msg:'原始值'
            },
            methods:{
       
                showInfo(){
       
                    //this.msg='单击触发事件'
                    this.msg='点击之后的内容'
                }
            }
        })
    script>
body>
html>

vue学习笔记二:vue开发基础上_第7张图片
5、computed计算属性
★响应式属性
vue学习笔记二:vue开发基础上_第8张图片

  • 计算属性其实是一个方法,但用法类似属性;
  • 应用场景:当数据随其他数据变化而变化时使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>总价格:{
     {
     totalPrice}}</p>
        <p>单价:{
     {
     price}}</p>
        <p>数量:{
     {
     num}}</p>
        <div>
            <button @click="num==0?0:num--">
                减少数量
            </button>
            /**
            
            **/
            <button @click="logTotalPrice">
            打印总价格
            </button>
        </div>
    </div>
    <script>
        var vm=new Vue({
     
            el:'#app',
            data:{
     
                price:20,
                num:0
            },
            computed:{
     
                totalPrice(){
     
                    return this.price*this.num;
                }//计算属性一般返回结果,num改变,totalprice随之改变
            },methods:{
     
           		  logTotalPrice(){
     
           		      console.log('totalPrice的结果'+this.totalPrice);//计算属性,所以无()
           		      }
        });
    </script>
</body>
</html>

vue学习笔记二:vue开发基础上_第9张图片
6、watch状态监听
用来监测vue实例中的数据变动。
vue学习笔记二:vue开发基础上_第10张图片
7、filters过滤器
对数据进行格式化。
☆|:管道符号
使用过滤器:
①插值表达式使用:{ {data属性名 | 过滤器名称}}
②属性绑定使用:v-bind:id=‘data属性名|过滤器名称’

filters:{
     
	toUppercase(value){
     //方法
		return value?value.toUpperCase():' ';
}
}

vue学习笔记二:vue开发基础上_第11张图片

二、vue数据绑定

1、样式绑定

  • 内联样式:v-bind将样式数据绑定给DOM元素
  • 绑定样式:以类名定义元素样式

绑定样式是为了操作样式
vue学习笔记二:vue开发基础上_第12张图片
vue学习笔记二:vue开发基础上_第13张图片

vue学习笔记二:vue开发基础上_第14张图片
2、内置指令
vue学习笔记二:vue开发基础上_第15张图片
vue学习笔记二:vue开发基础上_第16张图片

  • v-model:主要实现数据双向绑定,通常用在表单元素上。
  • v-text:在DOM元素内部插入文本内容。
  • v-html:在DOM元素内部插入HTML标签内容。
  • v-bind:属性单向数据绑定。
  • v-on:事件监听指令,负责给DOM元素绑定事件,配合事件类型使用。
  • v-for:实现列表渲染,常用来循环数组。
  • v-if和v-show:控制元素显示或隐藏,属性为布尔值。
    vue学习笔记二:vue开发基础上_第17张图片
    vue学习笔记二:vue开发基础上_第18张图片
    vue学习笔记二:vue开发基础上_第19张图片

三、vue事件

1、事件监听
在这里插入图片描述
vue学习笔记二:vue开发基础上_第20张图片
在这里插入图片描述
vue学习笔记二:vue开发基础上_第21张图片
2、事件修饰符
vue学习笔记二:vue开发基础上_第22张图片
vue学习笔记二:vue开发基础上_第23张图片
.prevent:HTML标签具有自身特性,可以使用.prevent修饰符来阻止标签的默认行为。
在这里插入图片描述
在这里插入图片描述
.once:只触发一次事件处理函数。
vue学习笔记二:vue开发基础上_第24张图片

vue学习笔记二:vue开发基础上_第25张图片

四、vue的组件

1、组件
即自定义标签
vue学习笔记二:vue开发基础上_第26张图片
调用:

Vue.component('参数1:组件名称',{
     参数2:配置对象
data(){
     }//定义组件可使用的数据
template//组件的模板,定义组件的界面
})

vue学习笔记二:vue开发基础上_第27张图片
2、局部注册组件
在这里插入图片描述

components:{
     
	//key:组件名,驼峰命名法
	//value:组件的配置对象
}

vue学习笔记二:vue开发基础上_第28张图片3、template模板:
vue学习笔记二:vue开发基础上_第29张图片
vue学习笔记二:vue开发基础上_第30张图片
4、组件之间的数据传递:
vue学习笔记二:vue开发基础上_第31张图片
props:规定组件可以通过哪些属性传递数据。
在这里插入图片描述
$emit:调用自定义的事件,然后传递数据。
在这里插入图片描述

vue学习笔记二:vue开发基础上_第32张图片
vue学习笔记二:vue开发基础上_第33张图片
在这里插入图片描述
5、组件切换
在这里插入图片描述
vue学习笔记二:vue开发基础上_第34张图片
vue学习笔记二:vue开发基础上_第35张图片

五、vue生命周期

1、钩子函数
vue学习笔记二:vue开发基础上_第36张图片
vue学习笔记二:vue开发基础上_第37张图片

2、实例创建
钩子函数beforeCreate和created
在这里插入图片描述

在这里插入图片描述

3、页面挂载
beforeMount和mounted:在实例创建后,如果挂载点el存在,就进行页面挂载。
4、数据更新
beforeUpdate和updated:vue实力挂载完成后,当数据发生变化时,会执行beforeUpdate和pudated钩子函数。
5、实例销毁
beforeDestroy和destroyed:生命周期函数最后阶段是实例的销毁,会执行beforeDestroy和destroyed钩子函数。
vue学习笔记二:vue开发基础上_第38张图片
$refs:一个小细节,具体看这
vue学习笔记二:vue开发基础上_第39张图片

你可能感兴趣的:(vue,vue.js)