Vue 入门

最新推荐文章于 2023-03-17 15:50:57 发布

hi_rainbow

最新推荐文章于 2023-03-17 15:50:57 发布

阅读量279

点赞数

分类专栏： Vue JavaScript 文章标签： Vue Vue入门 Vue生命周期 Vue属性

本文链接：https://blog.csdn.net/Gone_the_rainbow/article/details/80310557

版权

JavaScript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Vue

2 篇文章 0 订阅

订阅专栏

Vue使用

Vue Api

入口
Vue的实例作为入口

var vm = new Vue({
    el:'#rootId'
  })

vm是Vue的实例

属性

el(element)为Vue实例挂在的元素，其值可以为元素id,或者元素对象。
data: Vue实例的数据对象，当数据对象被data绑定，其中的属性就会拥有get和set属性，用来监听数据变化，实时响应。Vue实例可以通过$data属性访问原始数据对象。{{}}是Vue进行插值的语法
props: 传递数据
子组件的模板内不能直接引用父组件的数据，所以通过props 把数据传给子组件
template ，实例模板
它会替换掉挂载元素

方法

methods:方法定义
computed:计算
实时计算的一个对象，当数据对象发生改变是，会发生计算属性的改变
watch:数据对象的观察
对应一个对象，键是观察的数据，值是对应回调。所以被观察的数据必须在数据对象data中定义。
render Vue 渲染函数
参数{String | Object | Function}

render(createElement){
    return createElement({
        template:'<div></div>'
    })
}

生命周期函数

<html>
<head>
	<title>Vue</title>
	<script type="text/javascript" src='https://unpkg.com/vue'></script>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" >
// import temp from './temp.js'

var vm = new Vue({
    el:'#id',
    data(){
        return {
            name:''
        }
    },
    props:['data'],
    template:'<div>{{name}}{{data}}<slot></slot></div>',
    methods:{
        print(arg){
            console.log(arg)
        }
    },
    watch:{
        name(newValue,oldValue){
        
        }
    },
    computed:{
        add(){
            return this.name
        }
    },
    beforeCreate(){},
    created(){},
    beforeMount(){},
    mounted(){},
    beforeUpdate(){},
    updated(){},
    beforeDestroy(){},
    destroyed(){}
    
})
  
</script>
</body>
</html>