Vue基础（一）

好好睡觉好好学习好好吃饭

已于 2022-06-14 16:06:38 修改

阅读量1.3k

点赞数

分类专栏： vue 文章标签：前端框架

于 2022-03-27 16:40:13 首次发布

本文链接：https://blog.csdn.net/weixin_46273011/article/details/123774182

版权

vue结构的基础构成：实例化（数据，模板），挂树

引入vue库

  <!-- 引入vue的库 -->
    <script src="https://unpkg.com/vue@next"></script>

模板template 如果是多行内容一定要加``(!左边的符号)

其中使用的插值表达式{ {}} 里面可以写表达式，但是不可以写js的语句，如if等

data是函数所以要圆括号，methods不是函数，要加冒号，同时注意methods是有s是复数写法

<head>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    
</body>
<script>

    // 创建一个组件实例，包括数据v和模板，vue自动将数据和模板匹配，也就是数据连接vm
    const app = Vue.createApp({
    // 要传入的数据moel
    data(){
        return{
            message:'hello world'
        }
    },
 
    // 模板视图view
        template:'<div>{
  {message}}<div>'  

    });


    // 把组件挂在根节点上
   const vm = app.mount("#root");
    // 获取组件的数据
   console.log(vm.$data.message) ;
</script>

vue的内部属性和方法

methods和computed 计算属性的区别

computed计算属性的函数调用不需要加圆括号。当计算属性依赖的值改变，才会重新调用。methods中函数的调用要加上圆括号。而methods中的函数，只要data中数据改变就会改变。

    <div id="root"></div>
<script>
    const app =Vue.createApp({

        data(){
            return{
                content:'hello world',
                num1:10,
            }
        },
        methods:{
            sum(){
              return  Date.now()+this.num1;
            }
        },
        computed :{
            sum1(){
             return   Date.now()+this.num1;

            }
        },
        // computed计算属性的函数调用不需要加圆括号
        //当计算属性依赖的值改变，才会重新调用，例如content的内容改变，函数sum1不会计算
        //当num1改变的时候，函数sum1才会改变数值
        // methods中函数的调用要加上圆括号
        //而methods中的函数，只要data中数据改变就会改变
        template:`{
  {content}}{
  {sum1}}
       <div> {
  {sum()}}</div>`
    });
    const vm = app.mount('#root');
</script>

watch侦听器

在computed可以实现的函数功能试图用computed，watch时候用于异步函数。

    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data(){
                return{
                    content:'hello world',
                    num:10,
                }
            },
            watch:{
//每一秒监听data中num的数据是否发生变化
                num(){
                    setInterval(
                        ()=>{
                            console.log("num数值改变");  
                        },1000
                    )
                },
            },
            template:`<div>{
  {content}}{
  {num}}</div>`
        });
        const vm = app.mount("#root");
    </script>

vue的生命周期函数

到了某一个时刻，函数会自动执行

创建vue实列的前后两个节点时间， template被编译成函数是否mount挂树的两个节点时间，data数据改变是否被渲染到页面的两个时间节点，vue实例取消挂树后页面渲染是否彻底消失的两个时间节点。可以通过看查看节点是否被打印，来判断时间的区别

<body>
    <div id=&

最低0.47元/天解锁文章

好好睡觉好好学习好好吃饭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue基础（一）

vue结构的基础构成：实例化（数据，模板），挂树<head> <script src="https://unpkg.com/vue@next"></script></head><body> <div id="root"></div> </body><script> // 创建一个组件实例，包括数据v和模板，vue自动将数据和模板匹配，也就是数据连接vm
复制链接

扫一扫