Vue七大属性

Vue Vue

发布时间 : 2021-04-13 11:40

阅读 :

Vue
Vue的特点
Vue七大属性
基本语法
1. v-model的基本使用

Vue

Vue 官网：https://cn.vuejs.org/

Vue的特点

##轻量级的框架
Vue.js 能够自动追踪依赖的模板表达式和计算属性，提供 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，使读者更加容易理解，能够更快上手。

##双向数据绑定

声明式渲染是数据双向绑定的主要体现，同样也是 Vue.js 的核心，它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。
什么是双向绑定
摘抄：https://blog.csdn.net/weixin_37806077/article/details/99854751?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161828815816780264019766%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=161828815816780264019766&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v29-1-99854751.pc_search_result_cache&utm_term=vue%E7%9A%84%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A

1 observer用来实现对每个vue中的data中定义的属性循环用Object.defineProperty()实现数据劫持，以便利用其中的setter和getter，然后通知订阅者，订阅者会触发它的update方法，对视图进行更新。
2 我们介绍为什么要订阅者，在vue中v-model，v-name，两对嵌套的花括号等都可以对数据进行显示，也就是说假如一个属性都通过这三个指令了，那么每当这个属性改变的时候，相应的这个三个指令的html视图也必须改变，于是vue中就是每当有这样的可能用到双向绑定的指令，就在一个Dep中增加一个订阅者，其订阅者只是更新自己的指令对应的数据，也就是v-model=’name’和有两个对应的订阅者，各自管理自己的地方。每当属性的set方法触发，就循环更新Dep中的订阅者。

##指令
Vue.js 与页面进行交互，主要就是通过内置指令来完成的，指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

##组件化
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在 Vue 中，父子组件通过props传递通信，从父向子单向传递。子组件与父组件通信，通过触发事件通知父组件改变数据。这样就形成了一个基本的父子通信模式。在开发中组件和 HTML、JavaScript 等有非常紧密的关系时，可以根据实际的需要自定义组件，使开发变得更加便利，可大量减少代码编写量。组件还支持热重载（hotreload）。当我们做了修改时，不会刷新页面，只是对组件本身进行立刻重载，不会影响整个应用当前的状态。CSS 也支持热重载。

##客户端路由
Vue-router 是 Vue.js 官方的路由插件，与 Vue.js 深度集成，用于构建单页面应用。Vue 单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，传统的页面是通过超链接实现页面的切换和跳转的。

##状态管理
状态管理实际就是一个单向的数据流，State 驱动 View 的渲染，而用户对 View 进行操作产生 Action，使 State 产生变化，从而使 View 重新渲染，形成一个单独的组件。

Vue七大属性

·el属性
·data属性
·methods属性
·template属性
·render属性
·computed属性
·watch侦听属性

##基本语法
·注意：属性之间用逗号隔开。

<script>
    var vm = new Vue({
         el: '#app',

        data: {
            msg: "data属性"
        },

        methods: {
            Personal:function () {
                console.log("methods方法存放方法")
            }
        },

        template: `<div>模板的第二种使用方法2</div>`,
        //template："#bot",

        render: (createElement) => {
            return createElement("h1",{"class":"类名"，"style":"color: red"},"这一个render属性创建的虚拟dom")
        },
    })
</script>

##el属性
用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符

##data属性
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。当前端应用得是data属性中的变量时，改变data变量值的同时前端也会自动的改变，不许要从新刷新加载页面

##methods属性
放置页面中的业务逻辑，js方法一般都放置在methods中

##template属性
用来设置模板，会替换页面元素，包括占位符。

##render属性
创建真正的Virtual Dom

##computed属性
用来计算

##watch侦听属性
监听data中数据的变化

基本语法

v-model的基本使用

v-model 可以与下拉菜单，按钮，文本框，输入框，表单等绑定，并实现双向绑定的作用。
v-model 起绑定作用，
v-madel=”被绑定的属性”

与按钮绑定

<body id="#app">
    <button name="sex" value="男" v-model="sexs">男</button>
    <button name="sex" value="女" v-model="sexs">女</button>
    <!--打印被选择的按钮值-->
    <p>选择的性别是：{{buttonName}}</p>
</body>
<script>
    Var vue=new Vue({
        el="#app",
        data:{
            buttonName:""
        }
    })
</script>

与文本输入框绑定

<body>
    <div id="app">
        原始消息：{{message}}    <br/>
        文本输入框：<textarea v-model="message"/>
    </div>
    <script>
        window.onload=function(){
            new Vue({
            el: '#app',    //设置要进行渲染
            data:{
                message: "hello Vue!"    //原始显示内容
            }
        })
    }
    </script>
</body>

与表单绑定

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com