vueJs入门

发表于 2018-12-01 分类于开发，前端阅读次数：本文字数： 5.9k

1、下载node.js，再安装npm和vue

（1）到node.js官网下载node.js。下载并安装成功后，在控制台输入：node -v ，查看node是否安装成功；输入：npm -v ，查看node自带的npm是否安装成功。

（2）安装cnpm（中国版npm），控制台输入：npm install -g cnpm --registry=https://registry.npm.taobao.org。

（3）安装vue和vue-cli，控制台分别输入：cnpm install -g vue 和 cnpm install -g vue-cli 。（由于新版的vue-cli已经集成了webpack 所以下载了这个脚手架之后就不需要在下载webpack了）

2、vue-cli脚手架快速搭建静态网站

（1）在合适的地方新建一个vuejs文件夹。控制台进入该进入文件夹，并输入如下命令：vue init webpack test 。该命令新建一个vue项目，test是该项目的名字。输入之后，控制台会出现跳出一些询问，全部按下回车确认即可。

（2）控制台进入vuejs/test目录下，依次输入：cnpm install 和 cnpm run dev。成功之后再浏览器输入 localhost:8080 测试。

（3）修改test/src/compoents/HelloWord.vue文件，修改并实现helloWord。

3、学习vue

（1）vue-cli2 项目文件结构

build/: 文件是 webpack 的打包编译配置文件
config/: 文件夹存放的是一些配置项，比如服务器访问的端口配置等
node_modules/: npm安装的该项目的依赖库
src/: 这里是我们要开发的目录，基本上要做的事情都在这个目录里。
src/components/: 文件夹用来存放Vue组件。个人建议，把每一个组件中使用到的image图片放置到对应的组件子文件目录下，便于统一的管理
src/App.vue: 根组件，所有的子组件都将在这里被引用
src/main.js: 入口文件的 js 逻辑，在webpack 打包之后将被注入到 index.html 中
src/router/: 文件夹存放的是跟vue-router相关的路由配置项
src/assets/: 放置一些图片，如logo等。后期可以酌情删除，添加其他我们需要的文件夹
static/: 文件夹存放一些静态的、较少变动的image或者css文件
test/: 初始测试目录，可删除，init安装时如果按照提示选No，就直接不会显示
dist/: 该文件夹一开始是不存在，在我们的项目经过 build 之后才会产出
index.html: 整个项目的入口文件，将会引用我们的根组件 App.vue
package.json: 项目配置文件
README.md: 项目的说明文档，markdown 格式

（2）vue对象属性

date属性用于定义数据，使用如

{{name}}

method属性用于定义函数，使用如

1	{{changeName()}}

computed属性用于计算数据（相当于函数），使用如：

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p> <!--与method函数的形式上的区别是不用加()调用-->
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

watch属性用于监听数据（也相当于函数），当数据改变时立即调用，使用如下：

<div id = "computed_props">
   千米 : <input type = "text" v-model = "kilometers">
   米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
   var vm = new Vue({
      el: '#computed_props',
      data: {
         kilometers : 0,
         meters:0
      },
      methods: {
      },
      computed :{
      },
      watch : {
         kilometers: function(val) {                 <!--函数名要与变量名相同-->
            this.kilometers = val;
            this.meters = val * 1000;
         },
         meters: function (val) {
            this.kilometers = val/ 1000;
            this.meters = val;
         }
      }
   });
  // $watch 是一个实例方法
  vm.$watch('kilometers', function (newValue, oldValue) {
  // 这个回调将在 vm.kilometers 改变后调用
    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
  })
</script>

props属性用于将父组件的值传递到子组件中。父组件中值的更新会传递到子组件中，但反过来则不行。因此，定义一个改变值的函数，应该把该函数写到父组件中。

（3）vuejs指令

v-html指令，直接输出HTML语句到该元素的内容部分。
v-bind指令，用于约束标签的属性。如<a v-bind:href="url">，作用于href属性，可以让href等于自定义数据中的url变量。*v-bind指令的缩写<a :href="url">*。该标签的用处很大，如下：

<block v-for="(tab,index) in tabs" :key="index">
<!-- :id中把index参数赋给id；:class可以进行判断，单引号中是class名字 -->
  <div :id="index" :class="[activeIndex == index?'weui-bar__item_on':'','weui-navbar__item']" @click="tabClick">
    <div class="weui-navbar__title">{{tab}}</div>
  </div>
</block>

v-model指令，用于将输入数据传递到定义的数据变量。如<input v-model="message">将输入值传递到message变量。
v-on指令，用于监听事件并调用函数。如<button v-on:click="reverseMessage">，当点该button时，将调用reverseMessage函数。*v-on指令缩写<button @click="reverseMessage">*。
v-if、v-else、v-else-if指令按字面意思理解即可，使用如下：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show指令，效果与v-if指令相同。当v-show=部分为真时，则显示该标签。
v-for指令，即for循环。其使用如下：

<div id="app">
  <ol>
    <li v-for="site in sites">  <!--v-for中内容与Python类似，site可以换做其他名字-->
      {{ site.name }}
    </li>
  </ol>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

或：

<div id="app">
  <ul>
<!-- v-for除了迭代数组外，还可以迭代对象，key对应键、value对应值、index对应标号，可以只使用一个：value in object -->
    <li v-for="(value, key, index) in object" :key="index">  <!--官方建议，要给每一项一个key-->
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

（3）vue生命周期钩子函数

（4）控制元素class属性

<!DOCTYPE html>
<html>
<head>
  <title>vue js study</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  <style type="text/css">
    .redColor {
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1>class属性 动态绑定</h1>
    <div>
      <div :class="{redColor: changeColor}">{{ hello }}</div>
      <button @click="changeColor = !changeColor">改变颜色</button>
    </div>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        hello: 'hello world!',
        changeColor: false
      }
    })
  </script>
</body>
</html>

4. 后话

此篇笔记是刚刚接触vuejs时所写，较急促，不完整。期望以后更深入的学习和更完善的笔记。