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

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

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

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

Vue的实例化

1.实例格式：

选项	说明
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选项指定的元素上。

    
    
    



    
{{test}}

---

2.computed 计算

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

    
    
    



    

        
total price:{{ttprice}}
        
price: {{price}}
        
number:{{number}}

        

            decrease number
            add number
        
    

---

3.methods 方法

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

    
    
    



    

        please press this button
        
{{msg}}
    

---

4.filters 过滤

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

    
    
    



    

        
{{msg|toUpcase}}
    

 

 

 

5.watch 监听

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