vue2.0学习入门（webpack）

来源：互联网发布：淘宝店铺怎样请人装修编辑：程序博客网时间：2024/05/13 04:07

脚手架

首先上官网进行脚手架工具的搭建vue官网，nodejs的安装可以看下 nodejs安装与配置

npm install -g vue-cli vue init webpack my-project   (在安装的时候eslint选择no比较安全)cd my-projectnpm installnpm run dev

如果选择了yes，你会发现改改代码运行不起来了，看了下错误，希望获取到4个空格的缩进，但是发现了6个空格！缩进默认2个空格，多加一个会爆出问题导致不能执行，很容易在这一步就崩了，还有很多规范写法，不过为了写的比较标准也是可以yes一下的啦
这里写图片描述

这时候代码里监听了8080端口，网络正常的情况下可以访问localhost：8080了，这步还是挺重要的也比较简单，也很重要，webpack是前端打包工具，可以热更新， *.vue是vue的组件里面包含了html，css，js，如果你没有执行这些你会失去很多。。。

这里写图片描述

vue.js组件的重要选项

new Vue({    data:{        a:1,        b:[{name:1},{name:2}],        c:{},        d:false    },    method:{        active:function(){            this.a++;        }    },    watch:{        'a':function(val,oldVal){            console.log(val,oldVal)        }       }});

data用来保存数据，method用来写相关的方法，watch用来监听变量，在变量变化的时候触发匿名函数。data可以被暴露出来比如上面的对象被赋值到变量中 var vue = new Vue（。。。），这时候改变data的值可以使用vue.a = 2;

常用功能

模板指令v-text，v-html，{{}} （生成数据指令）

<div>{{a}}</div><div v-text="a"></div><div v-html="a"></div>

模板判断指令 v-if，v-show（false时v-if不渲染，v-show隐藏）

<div v-if="d"></div><div v-show="d"></div>

渲染循环列表 v-for

<ul>    <li v-for="item in b">        <p v-text="item.name">    </li></ul>

v-on

<button v-on:click="active"></button><button @click="active"></button>

v-bind

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>new Vue({    data: {      isA: true,      isB: false    }})

可以先看下主要的代码

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>test</title>  </head>  <body>    <div id="app"></div>    <!-- built files will be auto injected -->  </body></html>

在index.html中写了这些内容，生成的组件会填充到app中
下面是App.vue组件的代码，上面引入了另一个组件Hello的代码，然后在components中注册使用，在模板template中使用了hello标签来引入了hello.vue的组件，这其中用了很多的es6语言，感觉有点不是太适应

<template>  <div id="app">    <img src="./assets/logo.png">    <hello></hello>  </div></template><script>import Hello from './components/Hello'export default {  name: 'app',  components: {    Hello  }}</script><style>#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}</style>

下面看下慕课网的组件代码
App.vue

<template>  <div id="app">    <div v-text="title"></div>    <input v-model="newItem" v-on:keyup.enter="addNew">    <ul>      <li v-for="item in items" v-bind:class="{finished: item.isFinished}" @click = 'toggle(item)'>        {{item.label}}      </li>    </ul>  </div></template><script>import Store from './store'export default {  data: function () {    return {      title: 'this is a todolist',      items: Store.fetch(),      liClass: 'this is liClass',      newItem: ''    }  },  methods: {    toggle: function (item) {      item.isFinished = !item.isFinished    },    addNew: function () {      this.items.push({        label: this.newItem,        isFinished: false      })      this.newItem = ''    }  },  watch: {    'items': {      handler: function (val, oldVal) {        Store.save(this.items)      },      deep: true    }  }}</script><style>.finished{  color:red;}</style>

Store.js

const STORAGE_KEY = 'todos-vuejs'export default {  fetch: function () {    return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')  },  save: function (items) {    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))  }}

做了一个小的功能，维护了一个items数组来对li进行view的控制，watch方法监听items，当改变的时候去保存到localStorage中，方便下次访问

0 0