Vue.js前端开发实战(一)

最新推荐文章于 2024-07-23 17:22:52 发布

Alphamilk

最新推荐文章于 2024-07-23 17:22:52 发布

阅读量1k

点赞数 1

分类专栏： Vue2.0 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/dogxixi/article/details/131735578

版权

Vue2.0 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

Vue.js的核心在于其实例化过程和数据绑定机制。文章详细介绍了如何通过`data`定义初始数据，`computed`创建计算属性，以及`methods`定义方法。同时，提到了`filters`用于数据过滤和`watch`用于监听数据变化的功能，强调了Vue的响应式特性和组件化的编程思想。

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

Vue核心在于Vue.js，首先需要有Vue.js文件

在联网的条件下可以直接调用其他人的资源如下：

https://cdn.staticfile.org/vue/2.4.2/vue.min.js

Vue的实例化

1.实例格式：

<!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>
    
</body>
<script src="./js/vue.js"></script>
<script>
    var vm =new Vue({
        // 选项
        data:{},
        methods:{},
        el:{},
        computed:{},
        watch:{},
        components:{}
    })
</script>
</html>

选项	说明
data	data选项用于定义组件的初始数据。它可以是一个对象或者一个返回对象的函数。在组件中，可以通过this访问data中的属性，Vue会自动将其响应式化，即当数据发生改变时，相关的视图会自动更新。
computed	computed选项用于定义计算属性。计算属性是根据其他数据进行计算得到的属性，它具有缓存机制，只有在依赖的数据发生改变时才会重新求值。可以通过this访问计算属性，并且它们也是响应式的。
methods	methods选项用于定义组件中的方法。在methods中定义的方法可以通过this调用，在方法中可以访问组件的data、computed等属性，并且可以触发事件、修改数据等操作。
components	components选项用于注册组件。Vue中的组件是可复用的代码块，可以被多次使用。通过将组件注册到components选项中，就可以在模板中使用该组件。
filter	filter选项用于定义全局过滤器。过滤器可以用于在显示数据之前对数据进行处理。可以在模板中通过管道符
watch	watch选项用于监听数据的变化。当被监听的数据发生改变时，可以执行相应的回调函数。watch选项可以用来监听data、computed等属性的变化，也可以监听props传入的数据的变化。
el	el选项用于指定Vue实例的挂载元素。它可以是一个选择器字符串，也可以是一个DOM元素。Vue会将模板编译成渲染函数，并将其挂载到el选项指定的元素上。

1.data初始数据：

data选项用于定义组件的初始数据。它可以是一个对象或者一个返回对象的函数。在组件中，可以通过this访问data中的属性，Vue会自动将其响应式化，即当数据发生改变时，相关的视图会自动更新。

通过插值语法初始数据

2.el 唯一根标签，指的是你创建对象

el选项用于指定Vue实例的挂载元素。它可以是一个选择器字符串，也可以是一个DOM元素。Vue会将模板编译成渲染函数，并将其挂载到el选项指定的元素上。

<!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>
<script src="js/vue.js"></script>
<body>
    <div id="app">{{test}}</div>
</body>
<script>
    var vm =  new Vue({
        el:"#app",
        data:{
            test:114514
        }
    })
</script>
</html>

2.computed 计算

computed选项用于定义计算属性。计算属性是根据其他数据进行计算得到的属性，它具有缓存机制，只有在依赖的数据发生改变时才会重新求值。可以通过this访问计算属性，并且它们也是响应式的

<!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>
<script src="./js/vue.js"></script>
<body>
    <div id="app">
        <p>total price:{{ttprice}}</p>
        <p>price: {{price}}</p>
        <p>number:{{number}}</p>

        <div>
            <button @click ="number==0?0:number--">decrease number</button>
            <button @click = "number++">add number</button>
        </div>
    </div>
</body>
<script>
    var vm =new Vue({
        el:"#app",
        data:{
            price:20,
            number:0
        },
        computed:{
            ttprice(){
                return this.price*this.number
            }
        }
    })
</script>
</html>

3.methods 方法

methods选项用于定义组件中的方法。在methods中定义的方法可以通过this调用，在方法中可以访问组件的data、computed等属性，并且可以触发事件、修改数据等操作。

<!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>
<script src="./js/vue.js"></script>
<body>
    <div id="app">
        <button @click ="functionTest">please press this button</button>
        <p>{{msg}}</p>
    </div>
</body>
<script>
    var vm =  new Vue({
        el:'#app',
        data:{
            msg:''
        },
        methods:{
            functionTest(){
                this.msg = "implement this function"
            }
        }
    })
</script>
</html>

4.filters 过滤

filter选项用于定义全局过滤器。过滤器可以用于在显示数据之前对数据进行处理。可以在模板中通过管道符，管道符的作用是将数据传给管道符后面的函数等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用filters</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div id="app">
        <p>{{msg|toUpcase}}</p>
    </div>
</body>
<script> 
 var vm = new Vue({
    el:'#app',
    data:{
        msg:'hello world'
    },
    filters:{
        toUpcase(value){
            return value?value.toUpperCase() : ''
        }
    }
 })
</script>
</html>

5.watch 监听

methods选项用于定义组件中的方法。在methods中定义的方法可以通过this调用，在方法中可以访问组件的data、computed等属性，并且可以触发事件、修改数据等操作。

<!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>
<script src="./js/vue.js"></script>
<body>
    <div id="app">
        <input type="text" placeholder="plz input data" v-model ="watchs">
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            watchs:''
        },
        watch:{
            watchs(newname,oldname){
                if(newname === "fuck"){
                    console.log("发现违禁词");
                }
            }
        }
    })
</script>
</html>