II、Vue的项目目录结构 一些语法

Vue目录结构

这是某闭源项目的web端目录结构:

目录解析:

-目录/文件	-
build	项目构建(webpack)相关代码
config	配置目录、端口号:也有默认的
node_modules	npm加载时的项目依赖块
src	核心代码所在:
static	静态资源,图片,字体等等
test	初始测试目录
.xxx 文件	配置文件,语法配置,git配置
index.html	首页入口文件,添加meta信息或统计代码
package.json	项目配置文件
README.md	项目的说明,

src:
1. assets:放置图片,比如logo
2. componets:一些组建文件,可以不用
3. App.vue:入口文件,可以替代componets 将组建信息写在里面.
4. main.js:项目的核心文件

在webStorm搭建开发环境

1.File -》 project

2.之后一路默认 next.

3.以防万一,我们的npm指令 都用作 cnpm

cnpm install
cnpm run dev

vue.js起步

每一个Vue应用都需要通过实例话Vue来实现.

var vm = new Vue({
  // 选项
})

实例:

<div id="vue_det">
  <h1>site:{{site}}</h1>
  <h2>url:{{url}}</h2>
  <h3>{{detail()}}</h3>
</div>
<script type="text/javascript">
	var vm = new Vue({
    el:'#vue_det',
    data:{
      site:"豆瓣",
      url:"www.douban.com",
      alexa:"100000"
    },
    method:{
      detail:function(){
        return this.site+"-不负好生活-"
      }
    }
  })
</script>

1. data:用于定义属性,实例中有三个属性分别为:site、url、alexa
2. method:用于定义的函数,可以通过 return 来返回函数值
3. {{}}:用于输出对象属性和返回值

<div id="vue_det">
  <h1>site:{{site}}</h1>
  <h2>url:{{url}}</h2>
  <h3>{{detail()}}</h3>
</div>
<script type="text/javascript">
	var data = {
      site:"豆瓣",
      url:"www.douban.com",
      alexa:"100000"
    }
  var vm = new Vue({
    el:'#vue_det',
    data:data
  })
  //他们引用相同的对象
  document..write(vm.site === data.site)
  document.write("<br>")
  vm.site = "Runoob"
  document.write(vm.alexa)
</script>

Vue.js 模版语法

文本

<div id="app">
  <p>
    {{message}}
  </p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

html

<div>
  <div v-html="message"></div>
</div>
<script>
new Vue({
  el:'#app',
  data:{
    message:'<h1>菜鸟教程就是好</h1>'
  }
})
</script>

属性

<div>
  <label for="r1">修改颜色</label>
  <input type="checkout" v-model="use" id="r1">
  <br></br>
<div v-bind:class="{'class1':use}">
	v-bind:class 指令
</div>
</div>

<script>
new Vue({
  el:'#app',
  data:{
    use:false
  }
});
</script>