全干工程师的自我修养---vue第一部分

时间  2019-11-17
标签 全干 工程师 自我 修养 vue 第一 部分 繁體版
原文   原文链接

全干工程师的自我修养---vue第一部分

一、环境搭建

主要是搭建nodejs环境，设置淘宝源及安装cnpm，在以前的文章中有提到过，就再也不赘述。html

接下来全局安装vue脚手架：vue

cnpm install vue-cli -g
复制代码

这样就能够成功安装了，安装完成后，咱们就能够尽情的食用了。html5

也可使用在线加速cdn:node

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

二、初始化一个项目

咱们这里安装的是vue2.x,因此使用一下命令webpack

vue init webpack 
复制代码

最好不适用es lint6，因此前面4个都回车，后面填no.web

这样cd进目录，使用vue-cli

cnpm run dev
复制代码

打开localhost:8080就能够看到咱们的第一个vue hello,world项目了。npm

三、从爬行到飙车

3.1声明式渲染

Vue 实例生命周期

Vue.js 的核心是一个容许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：以下数组

<div id="app">
  {{ message }}
</div>
复制代码
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
复制代码

输出： hello,vuebash

3.2 数据绑定 v-bind

<div :title="title">鼠标绑定事件</div>
复制代码
data() {
      return {
        msg: "你好vue",
        title: "这是一个title!",
        message: '',
        todos: [{ text: '学习 JavaScript' },{ text: '学习 Vue' }, { text: '整个牛项目' }],
        formData: 'username',
    }
  },
复制代码

鼠标放在上面时，会显示： 这是一个title! 这就是v-bind，简写方式为 :

3.3事件绑定 v-on

<div id="app-1">
        <p>{{msg}}</p>
        <button v-on:click="reverseMessage">反转消息</button>
    </div>
//methods里面
    reverseMessage(){
      this.msg = this.msg.split('').reverse().join('');
    },
复制代码

点击反转消息按钮就会显示： euv好你 ，这就是v-on，简写为@

3.4数据双向绑定v-model

<div id="app-6">
      <p>message : {{message}}</p>
      <input type="text" v-model="message" name="message" id="message">
    </div>
复制代码

数据同步更新

3.5v-for

<div>
      <ul>
          <li v-for="item in todos">
            {{item.text}}
          </li>
      </ul>
</div>
复制代码

显示todos内容

3.6 v-if

<p v-if="seen">如今你看到我了</p>
复制代码

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

3.7 其余一些修饰符

v-html
v-on的修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素自己触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
复制代码

3.8ref操做dom

<div id="app-5">
      <input type="text"  ref="userInfo">
      <div id="box" ref="box">我是一个box</div>
      <button  @click="getInputValue()">获取input value</button>

  </div>
  
  
  //methods里
   // ref操做dom节点
    getInputValue(){
      alert(this.$refs.userInfo.value);
      this.$refs.box.style.background= 'red';
    }
复制代码

ref指定对象，在方法里经过this.$refs.对象来获取对象值。

3.9方法传值

<div id="app-7">
    <button @click="requestData()">请求数据</button>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>
  
  //data
  list: []
  
  //methods
      requestData(){
      for(var i=0;i<10;i++){
        this.list.push(i);
      }
    }
复制代码

点击按钮，就会显示0-9的列表

3.10小结--todolist

第一步====需求： todolist的增添和删除

<template>
  <div>
    //表单
    <input type="text" v-model="todolist" placeholder="请输入todo list" class="inputText">
    <button @click="pushData()" class="btn">+</button>
	//打印to'do'list
    <ul>
      <li v-for="(item,key) in list">
        {{item}}  ----- <button @click="del(key)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'helloworld',
  data() {
    return {
      todolist: '',
      list: []
    }
  },
  methods: {
      //添加元素操做
    pushData(){
      this.list.push(this.todolist);
      this.todolist = ''
    },
        //删除元素操做  splice是js数组操做的方法能够去看一下，这里的意思表示从key开始删除第一个，即key表明的值,若是是splice(1,3,'wiinfud')表示从第一个开始删除3个，并添加一个‘wiidfd'
    del(key){
        this.list.splice(key,1)
    }
  },
}
</script>
//样式
<style>
  .inputText{
    border-radius: 20px;
    border: solid 1px gray;
    padding: 20px 10px;
    display: inline;
  }
  .btn{
    background: skyblue;
    border: 2px red solid;
    padding: 20px 10px;
    display: inline;
  }
</style>


复制代码

第二部====需求：能够点击来更改状态

<template>
  <div>
    <input type="text" v-model="todolist" placeholder="请输入todo list" class="inputText">
    <button @click="pushData()" class="btn">+</button>

  <h2>进行中</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="!item.checked">
        <input type="checkbox" name="" id="" v-model="item.checked">{{item.title}}  ----- <button @click="del(key)">删除</button>
      </li>
    </ul>
    <br>
    <hr>
    <h2>已完成</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="item.checked">
        <input type="checkbox" name="" id="" v-model="item.checked">{{item.title}}  ----- <button @click="del(key)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'helloworld',
  data() {
    return {
      todolist: '',
      checked: false,
      list: [
        {
          title: 'vue',
          checked: true
        },
        {
          title: 'nodejs',
          checked: false
        }
      ]
    }
  },
  methods: {
    pushData(){
      this.list.push({
        title: this.todolist,
        checked: this.checked
      });
      this.todolist = ''
    },
    del(key){
        this.list.splice(key,1)
    }
  },
}
</script>

<style>
  .inputText{
    border-radius: 20px;
    border: solid 1px gray;
    padding: 20px 10px;
    display: inline;
  }
  .btn{
    background: skyblue;
    border: 2px red solid;
    padding: 20px 10px;
    display: inline;
  }
</style>


复制代码

3.11todolist升级

需求：保存状态，使用enter点击事件

须要使用到html5的storage技术

<template>
  <div>
    <input type="text" v-model="todolist" placeholder="请输入todo list" class="inputText">
    <button @click="pushData()" class="btn">+</button>

  <h2>进行中</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="!item.checked">
        <input type="checkbox" name="" id="" v-model="item.checked" @change="saveList()">{{item.title}}  ----- <button @click="del(key)">删除</button>
      </li>
    </ul>
    <br>
    <hr>
    <h2>已完成</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="item.checked">
        <input type="checkbox" name="" id="" v-model="item.checked" @change="saveList()">{{item.title}}  ----- <button @click="del(key)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'helloworld',
  data() {
    return {
      todolist: '',
      checked: false,
      list: [
        {
          title: 'vue',
          checked: true
        },
        {
          title: 'nodejs',
          checked: false
        }
      ]
    }
  },
  methods: {
    pushData(){

        this.list.push({
        title: this.todolist,
        checked: this.checked
        });
      this.todolist = ''
      localStorage.setItem('list',JSON.stringify(this.list))
    },
    del(key){
        this.list.splice(key,1);
        localStorage.setItem('list',JSON.stringify(this.list))
    },
    saveList(){
      localStorage.setItem('list',JSON.stringify(this.list))
    }

  },
  mounted() {
    var list = JSON.parse(localStorage.getItem('list'))
    if(list){
      this.list = list;
    }
  },
}
</script>

<style>
  .inputText{
    border-radius: 20px;
    border: solid 1px gray;
    padding: 20px 10px;
    display: inline;
  }
  .btn{
    background: skyblue;
    border: 2px red solid;
    padding: 20px 10px;
    display: inline;
  }
</style>


复制代码

这里能够将storage封装成一个模块，暴露出来引用就行。

更多详情页

更多详情请访问： juntech.top

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程