• Web学习（十一） Vue

    Web学习（十一） Vue

    1.配置环境

    1.1 安装Nodejs

    1.2 安装@vue/cli

    npm i -g @vue/cli

    • 1

    1.3 启动vue自带的图形化项目管理界面

    vue ui

    • 1

    常见问题1：Windows上运行vue，提示无法加载文件，表示用户权限不足。
    解决方案：用管理员身份打开终端，输入set-ExecutionPolicy RemoteSigned，然后输入y

    2.基本概念

    script部分

    export default对象的属性：

    • name：组件的名称
    • components：存储中用到的所有组件
    • props：存储父组件传递给子组件的数据
    • watch()：当某个数据发生变化时触发
    • computed：动态计算某个数据
    • setup(props, context)：初始化变量、函数
      • ref定义变量，可以用.value属性重新赋值
      • reactive定义对象，不可重新赋值
      • props存储父组件传递过来的数据
      • context.emit()：触发父组件绑定的函数

    template部分

    • ：存放父组件传过来的children。
    • v-on:click或@click属性：绑定事件
    • v-if、v-else、v-else-if属性：判断
    • v-for属性：循环，:key循环的每个元素需要有唯一的key
    • v-bind:或:：绑定属性

    style部分