Vue学习（第二天）

打开vscode，通过查看-终端打开终端，准备建一个vue项目。打开一个目标文件夹，终端给命令

npm install -g vue-cli

　　创建一个项目：

vue init webpack projectName
//cnpm install --global vue-cli 这个比上面更快一点

　　在这里发现报错了，说什么系统禁止运行脚本。如果发生这个问题这里这样解决：以管理员身份运行PowerShell，执行：get-ExecutionPolicy，回复Restricted，表示状态是禁止的。执行：set-ExecutionPolicy RemoteSigned。选择y。ok已经可以跑上面创建的项目了。然后进入到我们文件开始跑一下项目;

cd name
npm run dev

　   这样就是正常的建起来了。

　

 

　　项目左侧有目录结构。

 

 

 在跑代码的时候如果报错和eslint语法检测有关，则可以在index.js中找到useEslint设置为false。所以说下次建项目的时候直接把eslint不要了是最舒服的。

 

 

 ok项目跑起来了，接下来开始今天的学习：

首先，单页组件由以下三个组件构成：

<template>视图模版 <style>组件样式表 <script>组件定义

可以看到在script中有个data函数，在template用{{message}}表示的变量，在data中使用了message：‘helloworld’这种方式进行赋值。那么这个data函数可以返回一个对象或者属性，使用函数返回具有更高的灵活性，方便对数据初始化处理等。

双大括号引入的内容为Mustache语法，标签会被数据对象的属性值替换，当这个属性值变换的时候它也会更新。

v-for指令标记：

  我们需要使用一个类似数组的模型，则可以使用如下代码：

data () {
    return {
      message: 'hello world',
      todos:[
        {value:"吃一个巧克力",done:false},
        {value:"再吃一个饼干",done:true},
        {value:"吃香肠",done:false}
      ]
    }
  }

　　todos里面的项这样迭代使用：

<li v-for="todo in todos" >
    <label>{{todo.value}}</label>
</li>

　　在第一次使用代码的时候报错了，还是因为语法检测事情，在设置中搜索vetur关闭掉这个：

 

 

 　　ok报错消失了。否则的话v-for后面是要根一个bindkey才可以。

　　v-for不但可以渲染数组，还可以渲染对象属性：

　　

视图
<ul>
   <li v-for="value in obj">
     {{value}}
   </li>
</ul>

渲染
data(){
    return{
      obj:{
        first_name : "ray",
        last_name : "Liang"
      }
    }
  }

　　这样就可以了。由于书上的代码有问题所以修改了很长时间 - -。

测试用的html中可以通过在项目中新建一个html，然后引包来使用vue。

<script type = "text/javascript" src = "./node_modules/vue/dist/vue.js">
</script>

　　然后需要new一个vue

<script>
　　new Vue({
      el:'#app',//目的地
      data:{}
      });
</script>

　　这样就可以在这个html中使用vue了。我们可以在里面加入template来变更模版。

 　  变量使用：

　　可以在双括号中使用各种各样的结构，例如：

<h1>{{msg}}</h1>
<h2>{{1+1}}</h2>
<h3>{{1==1}}</h3>
<h4>{{1>2?'真的':'假的'}}</h4>
<h5>{{ {name:'frank'} }}</h5>

　　他们会显示成以下结果：

 

 　　而且vue实例暴露了很多有用的实例属性和方法，他们都有前缀$。

　　使用var vm = new Vue（｛｝）创建对象，之后通过vm.$data这样来使用属性或者方法。数据发生改变的时候视图也会发生改变，也就是数据驱动视图。这些数据将会与数据库将挂钩。Vue核心库只关注视图层（view）。数据不是主动传到视图上的，是通过控制器取到model然后展示到view上面的。vue将view层摘出来，单独做。路由功能一类的有nodejs完成。