Vue 初体验（一）

作者: samtake | 来源:发表于2019-05-02 01:58 被阅读0次

在教程安装里给出了多种引入方式，具体点击这里

直接`</script>`引入

在编辑器上输入html回车，这时候就会自动补全以下代码

<<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    
  </body>
</html>

引入 Vue

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

在页面输出hello Vue,用浏览器打开文件并检验效果

<div>hello Vue</div>

可以之后我们改造源文件让它与Vue产生关联：new 一个Vue实例

<script type="text/javascript">
    new Vue({
      el: '#app',  //挂载到指定节点上
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>

所挂载的节点需要添加一个id

<div id="app">{{ message }}</div>

最终源码

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

  </body>

  <div id="app">{{ message }}</div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#app',  //挂载到指定节点上
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</html>

此时用浏览器打开即可见到显示Hello Vue!

参考官方demo 链接

添加方法

添加显示

<div class="addMethod">
      <input type="text" name="" value="" v-model="info">
      <button type="button" name="button" @click="handleClick">add</button>
</div>

其中

v-model是Vue里面的双向绑定，
v-for是循环遍历
@click="handleClick" 绑定方法
console.log(this.info) 打印信息，如何查看打印输出：浏览器-右键-检查-Console
handleClick方法生命在methods对象里面

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

  </body>

  <div id="app">
    {{ message }}
    <div class="addMethod">
      <input type="text" name="" value="" v-model="info">
      <button type="button" name="button" @click="handleClick">add</button>
    </div>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: '#app',  //挂载到指定节点上
      data: {
        message: 'Hello Vue!',
        info: '',
        list:[],
      },
      methods: {
        handleClick(){
          //console
          this.list.push(this.info)
          this.info = ''
        }
      }
    })
  </script>
</html>

使用自定义组件

定义名为 todo-item 的新组件

Vue.component('todo-item',{
      props:['item'],
      template: '<li class="item">{{item}}</li>'
})

创建一个 todo-item 组件的实例，并传递属性值 v-bind:item="item"或者简写成:item="item"

<todo-item v-for="item in list" :item="item">{{item}}</todo-item>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      .item {
        color:red;
      }
    </style>
  </head>
  <body>

  </body>

  <div id="app">
    {{ message }}
    <div class="addMethod">
      <input type="text" name="" value="" v-model="info">
      <button type="button" name="button" @click="handleClick">add</button>
    </div>
    <ul>
      <todo-item v-for="item in list" :item="item">{{item}}</todo-item>
    </ul>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script type="text/javascript">
    Vue.component('todo-item',{
      props:['item'],
      template: '<li class="item">{{item}}</li>'
    })
    new Vue({
      el: '#app',  //挂载到指定节点上
      data: {
        message: 'Hello Vue!',
        info: '',
        list:[],
      },
      methods: {
        handleClick(){
          console.log(this.info)
          this.list.push(this.info)//往list数组添加数据
          this.info = ''//每次点击add的同时，清空输入框
        }
      }
    })
  </script>
</html>

以上操作有几个缺点

全局定义：强制要求每个component中的命名不得重复
字符串模版：缺乏语法高亮，在html有多行的时候，需要用\
不支持CSS：意味着当html和JavaScript组件化时，CSS明显被遗漏
没有构建步骤：限制只能用html和ES5 JavaScript,而不能使用预处理器，如Pug(formerly Jade)和Babel，即每次都需要手动在浏览器上刷新，没有自动热更新。

npm安装

安装Vue

npm install vue

安装命令行工具 (CLI)Vue CLI

npm install -g @vue/cli

出现安装问题

npm WARN deprecated joi@14.3.1: This module has moved and is now available at @hapi/joi. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
npm WARN deprecated topo@3.0.3: This module has moved and is now available at @hapi/topo. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
npm WARN deprecated hoek@6.1.3: This module has moved and is now available at @hapi/hoek. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
npm WARN deprecated cross-spawn-async@2.2.5: cross-spawn no longer requires a build toolchain, use it instead
npm ERR! Unexpected end of JSON input while parsing near '...TGOVzYcDOP1jLScCp0ACN'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sam/.npm/_logs/2019-04-29T01_23_19_163Z-debug.log

清楚一下缓存

npm cache clean --force

运行vue --version出现版本信息则说明安装成功

创建新项目

vue create my-app

使用默认安装

Vue CLI v3.7.0
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features

启动项目

cd my-app
npm run serve

> my-app@0.1.0 serve /Users/sam/Documents/studyUp/my-app
> vue-cli-service serve

 INFO  Starting development server...
 98% after emitting CopyPlugin                                                .
 DONE  Compiled successfully in 6412ms                               上午9:53:14


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.43.116:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

打开localhost:8080即可见到效果。

image.png

其中

1 node_modules 整个项目的依赖

2 pubic ico 图标

3 pubic index.html 整个项目的载体<div id="app"></div> 跟上面👆直接</script>引入的div一样

4 src 整个项目的源代码

5 Main.js 项目入口文件

6 babel.config.js babel配置

7 package.json 依赖包版本

8 说明

将上面的直接</script>引入的demo改成单文件形式👇三个模块独立

模版 template
逻辑 script
样式 style

在App.vue文件的模版中替换div内容,新建主件TodoItem.vue,在App.vue引入并使用

<template>
  <li class="item">{{item}}</li>
</template>

<script>
export default {
  props: ['item'],
}
</script>

<style scoped>
.item {
    color: red;
}
</style>

<template>
  <div id="app">
    {{ message }}
    <div class="addMethod">
      <input type="text" name="" value="" v-model="info">
      <button type="button" name="button" @click="handleClick">add</button>
    </div>
    <ul>
      <todo-item v-for="item in list" :key="item" :item="item">{{item}}</todo-item>
    </ul>
  </div>
</template>

<script>
import TodoItem from './components/TodoItem.vue' //引入TodoItem
export default {
  name: 'app',
  data() {
    return {
        message: 'hello vue',
        info: '',
        list: [],
    }
  },

  methods: {
    handleClick() {
        this.list.push(this.info)
        this.info = ''
    }
  },

  components: {
    TodoItem,       //注册TodoItem
  }

}
</script>

<style>
</style>

<todo-item v-for="item in list" :key="item" :item="item">{{item}}</todo-item>

上面👆是通过属性来传递item，下面👇改成插槽的方式

<span style="font-size:20px">{{item}}</span>

此时解析由<li class="item">{{item}}</li>改成

<li class="item">
  <slot></slot>
</li>

或者给插槽一个名字(字名插槽)

<todo-item v-for="item in list" :key="item">
    <template id="" v-slot:item >
        <span style="font-size:20px">{{item}}</span>
   </template>
</todo-item>

<template>
  <li class="item">
    <slot name="item"></slot>
  </li>
</template>

作用域插槽(使用场景：由子控件传递值给父控件，供父控件使用修改显示，选中由红变蓝)

<todo-item v-for="item in list" :key="item">
   <template id="" v-slot:item="itemProps"> 获取checked的值
      <span :style="{fontSize:'20px', color: itemProps.checked ? 'red' : 'blue' }">{{item}}</span>
   </template>
</todo-item>

<template>
  <li class="item">
    <input type="checkbox" v-model="checked">
    <slot name="item"  v-bind="{{checked}}"></slot> //将checked 传递出去
  </li>
</template>

动手复制代码跑来看看效果吧 👇👇👇👇👇👇👇👇👇

<template>
  <li class="item">
    <input  type="checkbox" v-model="checked">
    <slot name="item"  v-bind="{checked}"></slot>
  </li>
</template>

<script>
export default {
  props: ['item'],
  data() {
    return {
      checked:false
    }
  }
}
</script>

<style scoped>
.item {
    color: red;
}
</style>

<template>
  <div id="app">
    {{ message }}
    <div class="addMethod">
      <input type="text" name="" value="" v-model="info">
      <button type="button" name="button" @click="handleClick">add</button>
    </div>
    <ul>
      <todo-item v-for="item in list" :key="item">
        <template id="" v-slot:item="itemProps">
          <span :style="{fontSize:'20px', color: itemProps.checked ? 'red' : 'blue' }">{{item}}</span>
        </template>
      </todo-item>
    </ul>
  </div>
</template>

<script>
import TodoItem from './components/TodoItem.vue' //引入TodoItem
export default {
  name: 'app',
  data() {
    return {
        message: 'hello vue',
        info: '',
        list: [],
    }
  },

  methods: {
    handleClick() {
        this.list.push(this.info)
        this.info = ''
    }
  },

  components: {
    TodoItem,       //注册TodoItem
  }

}
</script>

<style>
</style>

atom插件安装依次点击：atom-prefencence-install

vue-autocomplete
atom-beautify 代码格式键美化(control+command+b)
atom-ternjs js补全
emmet 自定义代码块
file-icons
highlight-selected 选择某段代码自动高亮相同代码
language-vue vue语法

Vue 初体验（一）

直接`</script>`引入

添加方法

使用自定义组件

npm安装

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Full Stack Developer

程序员

让前端飞

Vue

前端开发

前端开发