0801 nodejs 一部分

1、安装nodejs
2、win+r / cmd命令 / 打开命令窗口
3、node -v / npm -v
4、安装Hbuilder X 创建vue项目
5、命令窗口 进入项目路径 cd路径
6、npm install 搜索package.json 安装依赖
多一个node_modules文件夹（依赖文件）
目录结构：
node + modules 运行环境
public 全局对象
src 用户开发

• assets 静态资源
• components 页面（.vue，由三部分组成）
• App.vue 启动文件（主配置）

npm run dev 开发运行
npm run build 发布文件（dist文件夹内为静态发布文件）
简单使用
下载导入vue js包
前端标签显示处理vue变量

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>

js创建vue对象，设置数据

var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })

语法属性
v-html：嵌入html

<div v-html="message"></div>

v-bind:class :style :id 在属性中使用vue数据，小心单引号

v-bind:style="'color:'+red1"
v-bind:class="{'class1': use}"

v-if v-else v-else-if 判断可见

v-if="use"       <h1 v-else> 两个语句只有一个能显示

v-show 判断是否显示（已添加，display:none）

v-on:click 绑定事件方法到vue methods

v-on:click="myclick"
methods:{
          myclick:function(){
             alert(111);
        }

v-for 循环

<li v-for="site in sites">
      {{ site.name }}
    </li>
    
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>

过滤器

 {{ message | capitalize }}
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }