用几分钟来看看vue是什么样的

1.vue简介

vue是一个构建用户界面的渐进式的框架，它关注图层，用数据绑定和指令元素，有API可实现响应式的视图组件 .

2.vue的配置

1.安装npm

a. 建2个文件夹: “文件名:\nodejs\node_global”，“文件名:\nodejs\node_cache”
b. 设置路径: npm config set prefix “文件名:\nodejs\node_global”
c. npm config set cache “D:\nodejs\node_cache”
环境变量 path加上"D:\nodejs\node_global"
然后安装npm
npm install -g
# 查看版本
$ npm -v

2. 需安装vue, vue-cli, webpack或其他的模块加载器

安装vue
npm install vue

#使用阿里的镜像，下载速度会快一些
$npm install -g
cnpm --registry=https://registry.npm.taobao.org

#创建一个vue-cli
$cnpm install --global vue-cli

#创建一个基于 webpack 模板的新项目
$vue init webpack projecta1

#升级或安装
cnpm npm install cnpm -g

进入项目，安装后可运行:
$cd projecta1
$cnpm install
$cnpm run dev

输入 http://localhost:8080, 便可以看它的页面.

3. vue-router

vue路由允许我们通过不同的 URL 访问不同的内容, 通过vue可以实现单页Web应用
vue-router安装
cnpm install vue-router

4. vue入门例子式

vue有几个文件, build: webpack相关代码, config: 配置文件，包括端口号等,
node_modules 依赖模块, src/assets: 放置一些图片，如logo等, src/components: 组件文件,
App.vue: 项目入口文件，可放一些组件, main.js: 项目的核心文件 static: 静态资源.

vue的实例属性和方法有前缀$, 与用户定义的属性有区分.
html 用v-html

<div id="a1">
        <div v-html="message"></div>
  </div>
  <script>
  new Vue({
   
       el: '#a1',
       data: {
    
           message: '<h1>hello</h1>'
       }
  })
  </script> 

运行结果为: hello
指令为带有 “v-” 的属性, 在表达式的值改变时，将某些行为应用在dom上
v-if

<div id="a1"> 
<div v-if="looka">hello</div> 
</div>
<script> new Vue({
    
  el: '#a1', data: {
    looka: true } }) 
  </script> 

运行结果为: hello

5.v-bind

<div id="a1"> 
  <div v