vue 脚手架的安装及指令本文已参与「新人创作礼」活动, 一起开启掘金创作之路。 01- 全局安装命令全局安装: n

本文已参与「新人创作礼」活动, 一起开启掘金创作之路。

01- 全局安装命令

全局安装: npm install -g @vue/cli; 检查是否安装成功: vue --version
创建项目: vue create vuecli-demo(文件名, 需要符合命名标准英文, _); 有 vue2 vue3 手动创建; 启动项目: cd (项目名) yarn serve 或 npm run serve
初始项目解构:

 vuecil-demo        # 项目目录
    ├── node_modules # 项目依赖的第三方包
    └── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹=》写代码
      ├── assets     # 静态资源
          └── logo.png # vue的logo图片
      ├── components # 组件目录
          └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # 入口js文件
    ├── package.json # 描述项目及项目
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置 
    ├── README.md    # 项目说明
	  └── package-lock.json # 项目包版本锁定和下载地址

02- vue.config.js 配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    host: 'localhost', // ip
    open: true, // 启动项目自动打开
    port: 3000 // 端口
  }
})

03- vue 插值表达式

{{}}: 大胡子语法, 插值表达式
里面可以写的: 写data数据字段名称; 对data数据字段进行表达式运算; 拼接; 算数三元运算
不可以写: js语句：声明变量，分支，循环; 访问在vue实例中的data之外定义的自定义的变量

04- vue 的指令

v-bind: 用来动态绑定标签上的属性的值。(标签上的属性值不能使用插值表达式来设置)。示例:

<元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素>
// 简写, 省略v-bind
<元素 :属性名1="值1" :属性名2="值2"></元素>

v-for: 用来循环遍历数组、对象、数字

    <ul>
      <li v-for="(item, index) in list" :key="index"> {{item.id}} -- {{item.name}}</li>
    </ul>

  data() {
    return {
      list: [{id:1, name:"我是你"},{id:2, name:"你是我"},{id:3, name:"你叫我"},],
      arr: [{id:1, title:'新闻1'}, {id:2, title: '新闻2'}]
    };
  },

key 的值是独一无二的, 如果在同一个域内有同样的 key 值那么控制台就会报错 3) v-if 和 v-show

    <p v-if="num">v-if</p>
    <p v-show="num">v-show</p>

  data() {
    return {
      num : false
    };
  },

v-if v-else-if v-else

    <p v-if="num > 80">优秀</p>
    <p v-else-if="num >= 60">一般</p>
    <p v-else>差</p>

  data() {
    return {
      num : 100
    };
  },

@click 事件; 需要注意到的就是此时的 this 就是指向的当前的组件

    <p>{{num}}</p>
    <button @click="add(150)">是老六就来点我</button>
    <br>
    <button @click="fn">是大哥就来砍我</button>

  methods: {
    add(n) {
      this.num += n
    },
    fn() {
      this.num = "老六"
    }
  },

v-model: 语法: v-model="data的数据变量"; 数据变化--> 视图对应变化; 视图对应变化--> 数据变化; 只存在于表单控件里面, 因为只有表单才实现与用户的交互.

05- vue 的修饰符

事件修饰符: .stop(阻止事件冒泡); .prevent(阻止默认事件, 还可以在事件传参里添加一个 $event , 然后在事件处理的时候 m.preventDefault() ); .once(程序运行期间只触发一次事件处理函数)
按键修饰符: @click.enter="fn"; 按键按下才会执行

06- MVVM

MVVM中的 M是 Model , V是 View, VM是 ViewModel.
对应到vue中，M是 data, V是 template , VM是 vue 组件
vue源码内采用 MVVM 设计模式思想, 当数据改变时会自动更新视图，大大减少了 Dom 操作
数据改变会自动更新视图，这种特性叫数据驱动视图。

vue 脚手架的安装及指令

本文已参与 「新人创作礼」活动, 一起开启掘金创作之路。

本文已参与「新人创作礼」活动, 一起开启掘金创作之路。