美文网首页
全干工程师的自我修养---vue第一部分

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

作者: Juntech | 来源:发表于2019-09-26 10:38 被阅读0次

1、环境搭建

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

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

cnpm install vue-cli -g

这样就可以成功安装了，安装完成后，我们就可以尽情的食用了。

也可以使用在线加速cdn:

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

2、初始化一个项目

我们这里安装的是vue2.x,所以使用一下命令

vue init webpack

最好不适用es lint6，所以前面4个都回车，后面填no.

这样cd进目录，使用

cnpm run dev

打开localhost:8080就可以看到我们的第一个vue hello,world项目了。

3、从爬行到飙车

3.1声明式渲染

Vue 实例生命周期

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

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

输出： hello,vue

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封装成一个模块，暴露出来引用就行。

获取更多内容

获取更多内容请访问： https://juntech.top/

更多详情

设置为vip可见的都可访问下面链接地址，即可观看原文
更多详情请访问： juntech

相关文章

网友评论

      本文标题：全干工程师的自我修养---vue第一部分

      本文链接：https://www.haomeiwen.com/subject/vczvyctx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|全干工程师的自我修养---vue第一部分|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！