Vue-cli以及Vue相关命令

房东的流浪猫
93 阅读4分钟

1.Vue是什么?

  • 官网:Vue是一个渐进式的JavaScript框架 2.如何理解渐进式及Vue的特点
  • 当项目开发时,之前的老项目需要修改成Vue框架时,可以一点点的修改
  • 且对原项目不会影响
  • 渐进式
  • 数据驱动视图 (响应式)
  • 组件系统

3.vue-cli是什么?

  • 是官方提供的一个全局模块包(通过命令工具执行的),用来快速创建脚手架项目
  • 脚手架是为了保证各施工过程顺利进行而搭建的工作平台
  • 说白了就是一套固定的文件夹+文件+配置
  • 项目上线脚手架就没有了

好处与功能

  • 统一的项目结构(文件夹+文件+配置代码)
  • 支持babel,eslint(约束代码风格),样式预处理器less及vue单文件
  • 提供开发浏览器,预览代码(热更新)
  • 基于nodejs命令

全局安装命令

  • npm i -g @vue/cli
  • vue -V 查看版本号

创建项目目录(脚手架)步骤

  • 命令:vue create vuecli-demo
  • 选择模块:

12.png

  • 启动项目: cd vuecil-demo 切换路径 npm run serve 启动项目

  • vue.config.js可以覆盖webpack.config.js(直接配置vue.config.js)

单文件组件(插值)

一个.vue就是一个组件

       <template>
       需要一个父盒子
        <div class="box">
          我是html模板
         </div>
       </template>
       
       <script>
         // 我是js逻辑
         export default {
            data() {
              return {
                // 定义变量，数据
              }
            }
         }
       </script>
       
       <style>
         /* 我是css样式 */
         .box {
           color:red
         }
       </style>

4.vue相关命令

  • v-bind:用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）
<元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素>
// 简写, 省略v-bind
<元素 :属性名1="值1" :属性名2="值2"></元素>
  • -v-model双向绑定: 把value属性和vue数据变量, 双向绑定到一起
   语法: v-model="data数据变量"
   双向数据绑定:
       数据变化 -> 视图自动同步
       视图变化 -> 数据自动同步
  • -v-model修饰符:让v-model拥有更强大的功能
   v-model.修饰符="vue数据变量"
      .number 以parseFloat转成数字类型
      .trim   去除首尾空白字符
      .lazy   在失去焦点时触发更改而非inupt时

v-bind与v-model区别

v-bind是一个单向数据绑定，映射关系：Model->View， 我们不需要进行额外的DOM操作，只需要进行Model的操作就可以实现视图的联动更新。

v-model是一个双向数据绑定，映射关系：View接受的数据,传给model,model的数据再传给view。把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了。

总结:v-bind用于普通标签,而v-model表单标签,区别在与有value属性

  • v-for:列表渲染, 所在标签结构, 按照数据数量, 循环生成
列表渲染, 所在标签结构, 按照数据数量, 循环生成
  • v-text v-html:更新DOM对象的innerText/innerHTML
    v-text="vue数据变量"
    v-html="vue数据变量"
  • v-show v-if:控制标签的可见与不可见
  <标签 v-show="vue变量" />
  <标签 v-if="vue变量" />
  如果vue变量的值为true，就可见，否则就不可见。

原理:v-show 用的display:none隐藏   (频繁切换使用)
v-if  直接从DOM树上添加或移除(DOM里面删了就没有了)

  • v-if,v-else-if,v-else:就是if判断
<标签 v-if="条件">        </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else>             </标签>
  • v-on和methods:给标签绑定事件
  <标签 v-on:事件名="要执行的*少量代码*" >
  <标签 v-on:事件名="methods中的函数" >
  <标签 v-on:事件名="methods中的函数(实参)">

注意:v-on可以简写成 @。 即 @事件名="methods中的函数" 事件名可以是任意合法的dom事件

配置项-methods

  export default {
  methods: {
   函数1: function(){
   },
   函数2(){
   } }
  • 与v-on配合使用
  • 在methods内部访问数据。this.xxx
  • 在methods内部调用其他的methods 5.-v-on相关事件
  • -v-on事件对象:vue事件处理函数中, 拿到事件对象
  无传参, 通过形参直接接收
  传参, 通过$event指代事件对象传给事件处理函数
  • -v-on事件修饰符:方便事件处理
    <标签 @事件名.修饰符="methods里函数" />
   .stop - 阻止事件冒泡
   .prevent - 阻止默认行为
   .once - 程序运行期间, 只触发一次事件处理函数
  • -v-on按键修饰符:给键盘事件, 添加修饰符, 增强能力
   [@keyup.enter ](</keyup.enter >) -  监测回车按键
   [@keyup.esc ](</keyup.esc >)    -   监测返回按键

查看更多

avatar
文章
阅读
粉丝