VUE基础知识

最新推荐文章于 2023-02-09 15:03:22 发布

weixin_45989924

最新推荐文章于 2023-02-09 15:03:22 发布

阅读量183

点赞数

分类专栏： vue基础文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45989924/article/details/116982873

版权

本文介绍了Vue.js的基础知识，包括创建Vue实例、响应式数据绑定、事件处理、计算属性、侦听器、条件和循环指令、表单绑定等核心概念，帮助初学者快速掌握Vue开发。

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

VUE基础知识

学习之前实现一个简单的vue dome

<!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>
</head>
<body>
    <div id="app">
       
    <h1> {
  {name}}</h1>
    <h2>{
  { totle}}</h2>
    <button @click="add(1)">点击</button>
    <label for="">姓</label>
    <input type="text" v-model="firstname">
    <label for=""> 名</label>
    <input type="text" v-model="lastname">
    <label for="">姓名</label>
    <input type="text" v-model="allname">
    <h3>{
  {allname}}</h3>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    var vm=new Vue({
    
        el:"#app",
        data:{
    
            name:"niu",
            num1:1,
            num2:3,
            count:88,
            firstname:"牛",
            lastname:"开心",
            allname:"haha"

        },
        methods:{
    
            add:function(a){
    
                console.log("打印过",a);
            }
        },
        computed:{
    
            totle:function(){
    
          var totle =this.num1+this.num2
             return totle
            },
          
        },
        // watch监听属性的方法  
        watch:{
    //配置监听
            firstname(newvalue,oldvalue){
    
                        console.info("监听 count的变化")
                        this.allname= this.firstname+ this.lastname
                        console.info( this.allname)
                    }
        },
       

    })
</script>
</html>

我们来做我们的第一个Vue程序，体验一下Vue的响应式

阅读JavaScript代码，会发现创建了一个Vue对象
创建Vue对象的时候，传入了一些options：{}
{}中包含了el属性：el属性:提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标（节点），el属性的属性值为字符串，该字符串是 CSS 选择器，也可以是一个 HTMLElement 实例，该属性指定vue实例的挂载对象的节点只在用 new 创建实例时生效，指定vue实例的作用范围。 el: ‘#app-3’,
{}中包含了data属性：当一个 Vue 实例被创建时，它将 data 对象中的所有的 property （属性）加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。data:用于存放实例需要的数据，属性值可以是一个对象,也可以是一个返回对象的函数
{}包含了事件处理函数：事件处理methods属性：
（1）. 事件的监听：通过在标签身上通过v-on的指令来设置事件的监听简写为@click，该指令的值可以是：“事件执行的代码（直接在双大括号里面绑定事件），”也可以是事件处理函数。methods属性（和data同级）：为方法属性，属性值为一个对象

（2）. 事件处理函数：在Vue中，提供了methods属性用来定义实例中需要用到的所有方法，也就包含了事件的方法，注意在methods里面使用数据必须用this.属性

（3.）事件传参：在vue中我们可以通过事件处理函数进行参数的传递：在事件名后面小括号（参数）
6.{}中包含了computed属性：vue中提供的计算属性：当需要对原数据做一些额外的操作，并且并不需要改变原数据，而是得到一个新数据，计算属性里面的数据会随着元数据的改变而改变，这时可以采用计算属性计算属性和data属性同级
计算属性的特点：计算属性在第一次使用时，对应的方法结果会被缓存，除非依赖的原数据发生改变，对应的结果也会改变
计算属性的get和set方法
https://www.jianshu.com/p/8ad34c83cea0

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
    <div id="app">
    <p>请选择个人爱好</p>
    <!-- 这里注意不要用 :checked="xx" 绑定选中状态 这样并不能形成双向绑定的作用 -->
    <p><input type="checkbox" v-model="checkAll">全选 checkAll : {
  { checkAll }}</p>
    <p><input type="checkbox" v-model="eat">吃饭 eat : {
  { eat }}</p>

最低0.47元/天解锁文章

weixin_45989924

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
VUE基础知识

VUE基础知识学习之前实现一个简单的vue dome<!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
复制链接

扫一扫

专栏目录