vue环境搭建与部分基本语法

一、环境搭建 

二、部分基本语法

---

一、环境搭建

1.安装nodejs

检测node是否安装成功，在cmd（开始>搜索>cmd）中输入命令，node -v,返回结果应为所安装nodejs的版本号。

注：nodejs自带npm（vue集成开发环境需借助npm远程下载包，国内使用cnpm）

2.安装cnpm

搜索淘宝镜像：

 在cmd中输入上述截图中的指令（注意：不带$符号），输入“cnpm -v” 检测是否安装成功。

3.安装vue脚手架

cmd指令：cnpm install -g vue-cli

注：vue-cli是有Vue提供的一个官方cli，专门为单页面应用（以组件化开发的模式）快速搭建繁杂的脚手架。

4.安装vscode。

5.创建项目

（1）在外部新建一个文件夹，打开vscode，文件>打开文件夹。

（2）接着安装vue所需的插件（vuter、vue 2 Snippets）。

（3） 在vscode内，终端>新建终端。

（4）在终端内输入命令：vue init webpack-simple ***（文件夹名）

（5）文件>打开文件夹***

（6）在vscode内安装依赖，命令“cnpm install”

（7）在终端输入cnpm run dev,运行文件

上图内的 localhost:8081为运行的端口号。

运行结果如下图：

至此环境搭建完成。 

（8）ctrl+c，点击y(yes)关闭项目。

---

二、基本语法

（1）Vue项目详解

（2）App.vue为模板界面，开发时会选择删除里面的内容，然后进行自主编辑。如下：

 main.js为主文件入口，其内代码：

主模板<template>中只能写一个标签，否则会报错。

（3）数据绑定

表达式：{{ }}

	<template>
	  <div id="app">
	      <!--变量的绑定-->
	      <p>{{msg}}</p>
	      <!--对象的绑定-->
	      <p>{{obj.name}}</p>
	      <!--数组绑定   循环输出-->
	     <ul>
	     <!--在使用v-for时添加key属性   保持唯一性-->
	      <li v-for="(item,index) in list" :key="item">
         {{item+"/"+index}}
	      </li>
	     </ul>
	      <ul>
	     <!--在使用v-for时添加key属性   保持唯一性-->
	      <li v-for="(item,index) in lists" :key="item">
	      {{item.title+"/"+index}}
	      </li>
	     </ul>
	      <ul>
	     <!--在使用v-for时添加key属性   保持唯一性-->
	      <li v-for="(item,index) in listnews" :key="item">
	      {{item.title+"/"+index}}
         <ol>
	          <li v-for="a in item.list" :key="a">
	            {{a.title}}
	          </li>   
	        </ol>
	      </li>
	     </ul>
	  </div>
	</template>
	<script>
	export default {
	  name: 'app',
	  data () {
	    return {
	      msg: 'Welcome to Your Vue.js App',
	      obj:{
	        name:"张三"
	      },
	      list:[
	        1,2,3,4
	      ],
	      lists:[
	        {"title":"1"},
	         {"title":"1"},
	          {"title":"1"},
	           {"title":"1"}
	      ],
	      listnews:[
	        {
	          "title":"水果",
	          list:[
	            {"title":"苹果"}
	          ]
	        }
	      ]
	    }
    }
	}
	</script>

（4）vue绑定属性（class、style）

 

<template>
  <div id="app">
      <!--元素属性的绑定-->
     <!-- 一般适用于img的src-->
     <!-- v-bind 可以简写为 :title -->
      <div v-bind:title="title"></div>
      <div :title="title"></div>
      <!-- 绑定html标签 -->
      <div v-html="h"></div>
      <!-- 绑定数据的另一种方式 -->
      <div v-text="msg"></div>
      <!-- 邦定class类名称 -->
      <div :class="{'red':cla,'blue':!cla}">
        绑定类名称
      </div>
      <!-- 绑定style -->
      <div :style="{'width':w+'px','height':h+'px'}"> </div>
    </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      obj:{
        name:"张三"
      },
      title:"wo shi  biao ti ",
      h:"<h1>我是h1</h1>",
      cla:true,
      w:100,
      h:200
    }
  }
}
</script>
<style lang="scss">
  .red{
    color: red;
  }
  .blue{
    color: blue;
  }
</style>

（5）组件创建与挂载

组件的声明：

<template>
    <div>
        {{msg}}
    </div>
</template>
<script>
export default {
    data(){
        return {
            msg:"我是自定义组件"
        }
    }
}
</script>
<style lang="sass" scoped>
    // scoped 作用于当前的组件样式
</style>

组件的挂载与使用：

<template>
  <div id="app" >
      <v-Home></v-Home>
  </div>
</template>

<script>
import Home from './component/Home.vue'
export default {
  name: 'app',
  components:{
    //组件的挂载
    'v-Home':Home
  },
  data () {
    return {
      msg:"",
    }
  },
  mounted(){
  },
  methods:{
  }
}
</script>

<style lang="scss" scoped>
// scoped 作用于当前组件
</style>

 待续。。。