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"
      }
    }
  }

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

Vue学习（第二天）

猜你喜欢