vue基础学习笔记

暄染落墨

已于 2023-08-21 22:37:36 修改

阅读量267

点赞数

文章标签： vue.js 学习笔记

于 2023-07-25 14:28:59 首次发布

本文链接：https://blog.csdn.net/qq_36136196/article/details/131895524

版权

VUE学习笔记

Vue框架

javascript框架
简化dom操作
响应式数据驱动

第一个Vue程序

导入开发版本的Vue.js
创建Vue实例对象，设置el属性和data属性
创建简洁的模板语法把数据渲染到页面上

<body>
 <!-- 3.view层 模板 -->
    <div id="app">
        {{ message }}
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
    
        var app = new Vue({
            el:"#app",
            //  model 数据 
            data:{
                message:"Hello Vue!"
            }
        })
    </script>
</body>

el挂载点

作用：el是用来设置Vue实例挂载（管理）的元素

范围：Vue会管理el选项命中的元素及其内部的后代元素
可以使用多种选择器，但是常用id选择器
设置的Dom元素：可以使用其他的双标签，不能使用html和body

data数据对象

Vue的数据定义在data中
data可以表现复杂的数据，需要遵守js的语法

        字符串{{ message }}
        对象<h2>{{school.name}}</h2>
        <ul>
            <li>数组{{campus[0]}}</li>
        </ul>
       data:{
                message:"Hello Vue!",
                school:{
                    name:"heima"
                },
                campus:["beijing"]
            }

Vue指令

内容绑定，事件绑定
显示切换，属性绑定
列表循环，表单元素绑定

内容绑定v-text，v-html

v-text指令可以设置标签的内容
默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
v-html指令设置元素的innerHTML
内容有html结构的会被解析为标签，v-text只会解析为文本

事件绑定v-on

事件有点击，移动，鼠标移入移出等
形式：v-on:事件名=“方法名”
可简写为：@事件名=“方法名”，
具体的方法实现方式写在script中，
this可以获得该实例对象，对数据进行相应的操作

<!-- 2.HTML结构 -->
    <div id="app">
        <!-- <input type="button" value="v-on指令" v-on:click="doIt"> -->
        <input type="button" value="v-on指令" @click="changeFood">
        <p v-text="food"></p>
    </div>
        <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
    <!-- 3.创建Vue实例 -->
        var app = new Vue({
            el:"#app",
            data:{
                food:"西红柿鸡蛋"
            },
            methods:{
                doIt:function(){
                    alert('做IT')
                },
                changeFood:function(){
                    this.food+='好吃！'
                }
            }
        })
    </script>

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的参数
事件的后面跟上.修饰符可以对事件进行限制

<input type="button" value="点击" @click="doIt(666,'老铁')">
<input type="text" value="" @keyup.enter="sayHi">

    methods:{
        doIt:function(p1,p2){
            console.log(p1);
            console.log(p2)
        },
        sayHi:function(){
            alert("吃了吗")
        }
    }

显示切换v-show,v-if

v-show,v-if功能相同，都是根据表达式的真假，切换元素的显示和隐藏
形式：v-show=“true"后边是布尔值，可以为布尔值，变量，表达式。
v-show=“age>10”
v-if是直接操作dom元素的，进行添加和删除。v-show是操作属性display的。

属性绑定v-bind

作用：设置元素的属性（比如src,title,class)
形式：

<div>
  <img v-bind:src="imgSrc">
  <img v-bind:title="imgetitle+'!!!'">
  <img v-bind:class="isActive?'active':''">
  <img v-bind:class="{active:isActive}">
  <img :src="imgSrc"> 简写形式
</div>
var app = new Vue({
 el:"#app",
 data:{
 imgSrc:"图片地址",
 imgTitle:"黑马程序员",
 isActive:false
 }
 })

v-for列表循环

根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index) in 数据
数组长度的更新会同步到页面上，是响应式的

    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">
            <!-- 注意item顺序 -->
                {{index}}-{{item}}
            </li>
        </ul>
    </div>

v-model表单元素绑定

获取和设置表单元素的值（双向数据绑定）
data和模板表单里的数据是对应的
绑定的数据<–>表单元素的值

        <input type="button" value="设置m" @click="setM">
        <input type="text" v-model="message1" @keyup.enter="getM">
        {{message1}}
            data:{
                message1:"hello",
            },
            methods:{
                getM:function(){
                    console.log(this.message1)
                },
                setM:function(){
                    this.message1 = "kkkk"
                }
            }
  下拉选择框
 <select v-model="selected">
    <option value="" disabled>请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  选中了{{selected}}

组件注册和使用component

<div id="app">
    <zujian v-for="item in items" v-bind:param="item"></zujian>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  Vue.component("zujian",{
    props:['param'],
    template:'<li>{{param}}</li>'
  });
  var vm = new Vue({
    el: "#app",
    data: {
      sex: "abc",
      selected:"",
      items:["java","python","sql"]
    }
  });
</script>

生命周期和钩子函数mounted

参考：https://blog.csdn.net/qq_45890970/article/details/123120797
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子（生命周期回调函数、生命周期函数）的函数，这给了用户在不同阶段添加自己的代码的机会。
2.一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝，否则会影响到其它所有实例

<div id="vue">
{{info.address.street}}
  <a v-bind:href="info.url">{{ info.url }}</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>

  var vue = new Vue({
    el: "#vue",
    data(){ // 上述2
      return{ // 请求的返回参数合适，必须和json字符串一样
        info:{
        }
      }
    },
    mounted(){ //上述1，钩子函数，链式编程，ES6新特性
      axios.get('data.json').then(response=>(this.info = response.data))
    }
  })
</script>

计算属性computed

计算出来的结果保存在属性中，内存中运行，相当于缓存，不常用的东西可以缓存，节约系统开销

<div id="vue">
<!--  currentTime1是方法，需要带()，currentTime2是属性，直接写就ok-->
{{currentTime1()}} 
  {{currentTime2}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>

  var vue = new Vue({
    el: "#vue",
    data(){ // 避免
      return{
        message: "hello,liu"
      }
    },
    methods: {
      currentTime1: function (){
        return Date.now();
      }
    },
    computed: {
      currentTime2: function () { //方法内数据有更新后，重新计算属性currentTime2
        this.message; 
        return Date.now();
      }
    }
  })
</script>

内容分发-slot插槽

提高代码灵活性，代码复用

<div id="app">
  <todo>
    <todoitem slot="todoitem" :title1="k1"></todoitem>
    <todoli slot="todoli" v-for="ll in todoItemss" v-bind:lidata="ll"></todoli>
  </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  Vue.component("todo",{
    template: '<div>' +
      '<slot name="todoitem"></slot>'+
      '<ul>' +
      '<slot name="todoli"></slot>'+
      '</ul>'+
    '</div>'
  });
  Vue.component("todoitem",{
    props: ["title1"],
    template: '<p >{{title1}}</p>'
  });
  Vue.component("todoli",{
    props: ["lidata"],
    template: '<li>{{lidata}}</li>'
  })
  var vm = new Vue({
    el: "#app",
    data: {
      k1: "list",
      todoItemss: ["a","b","c"]
    }
  })
</script>

<div id="app">
  <todo>
    <todoitem slot="todoitem" :title1="k1"></todoitem>
    <todoli slot="todoli" v-for="(ll,index1) in todoItemss" v-bind:lidata="ll"
            v-bind:indexcom="index1" v-on:removedef="removevm" ></todoli>
            removedef自定义事件=Vue实例的事件
  </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  Vue.component("todo",{
    template: '<div>' +
      '<slot name="todoitem"></slot>'+
      '<ul>' +
      '<slot name="todoli"></slot>'+
      '</ul>'+
    '</div>'
  });
  Vue.component("todoitem",{
    props: ["title1"],
    template: '<p >{{title1}}</p>'
  });
  Vue.component("todoli",{
    props: ['lidata','indexcom'], //indexcom不要有大写字母的变量名
    template: '<li>{{lidata}} <button @click="removecom(indexcom)">删除</button></li>',
    methods: {
      removecom:function (indexcom) {
        this.$emit('removedef',indexcom)
      }
    }
  })
  var vm = new Vue({
    el: "#app",
    data: {
      k1: "list",
      todoItemss: ["a","b","c"]
    },
    methods: {
      removevm: function (param1) {
        this.todoItemss.splice(param1,1)
      }
    }
  })
</script>

组件<=>前端 <=> Vue实例，通过前端的双向绑定功能，利用$emit自定义事件实现组件对Vue实例的操作。
网络通信：axios
页面跳转：vue-router
状态管理：vuex
npm:项目综合管理工具，类似于maven
vue特色：计算属性
MVVM：VM：vue.js连接数据和视图的，DOM监听和数据绑定。数据<=>视图

暄染落墨

关注

0
点赞
踩
0

收藏

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

v-if是直接操作dom元素的，进行添加和删除。v-show是操作属性display的。v-show,v-if功能相同，都是根据表达式的真假，切换元素的显示和隐藏。形式：v-show=“true"后边是布尔值，可以为布尔值，变量，表达式。内容有html结构的会被解析为标签，v-text只会解析为文本。作用：设置元素的属性（比如src,title,class)数组长度的更新会同步到页面上，是响应式的。data和模板表单里的数据是对应的。可简写为：@事件名=“方法名”，绑定的数据表单元素的值。
复制链接

扫一扫