vue的基本用法

1.Vue安装

//打开服务器
yarn serve
npm run serve
ctrl + c :停止服务器

目录名 作用
node_modules npm 加载的项目依赖模块
public 公共资源目录
src 开发目录
src/main.js 主入口文件
src/App.vue 网站首页文件
src/assete 存放静态资源：css、js、字体、图片、资源
src/components 存放通用模块组件
src/router 存放路由设置文件
src/views
babel.config.js
package.json
package-lock.json
README.md

---

static 静态资源目录，如图片、字体等
dist 打包后会生成该的目录
build 项目构建(webpack)相关代码

2、Vue 基本语法

<!--  
Vue.js中就三种标签
1. <template></template>
2. <script></script>
3.<style></style>
 -->
 <!-- <template>
  <div>
      <div v-pre>{{ htmlcode }}</div>
  </div>
</template>
<script>
export default {
  data() {
      return {
          htmlcode: "<h1 style='color:red;'>欧阳克</h1>"
      };
  }
};
</script> -->
<template>
   <div class="first" >{{name1 + name2}}</div>
   <p>{{ret()}}</p>
   <p v-text="name1"></p>
   <p v-html="html"></p>
   <!-- <p v-pre="htmlx"></p> -->
   <input type="text" v-model="myname">
   <input type="text" v-bind:value="myname">
    <p v-text="myname"></p>
  <a href=""></a>
    <input type="text" v-model="myname">
</template>
<script>
 export default{
  data(){
    return {
      name1:'aaa',
      name2:'bbb',
      value:100,
      html:'<p>asdasd</p>',
      input:'asd',
      htmlx:'<h1>sad</h1>',
      myname:'null'
    }
  },
  methods:{
    ret()
    {
      this.name1  ='ccc';
    }
  }
 }
</script>
<style>
.clore
{
  background-color: red;
}
</style>

<template>
<!-- <a href="http://baidu.com" @click.prevent="fun1()">显示</a>
<div v-on:click.stop="fun1()">父亲
  <div @click.stop="fun1()">儿子</div>
</div> -->
<!-- <p>{{count}}</p>
<button @click="fun2($event)">点击</button> -->
<input type="text" v-on:input="fun3($event)">
<!-- <p>{{value}}</p> -->
<!-- <p v-if="value == 1">1</p>
<p v-else-if="value == 2">2</p>
<p v-else>3</p> -->
<ul>
  <li v-for="(v,k,index) in arr">{{v}} == {{k}}</li>
</ul>
</template>
<script>
export default({
  data(){
    return {
      count:1,
      value:1
    }
  },
  methods:{
    fun1(){
      console.log('click');
    },
    fun2(event)
    {
      this.count++
    },
    fun3(event)
    {
      this.value = event.data;
    }
  }
})
</script>
<style>
</style>