vue基础语法点

1.vue框架安装

1.1.引入vue,可以使用 CDN 方法直接在html页面引入：

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

1.2.通过脚手架安装vue框架：

$ npm install -g vue-cli  (其中的vue-cli是vue官方提供用于搭建vue+webpack+es6项目的脚手架工具)

$ vue init webpack myapp  （其中的myapp是我的项目名称）

$ cd myapp

$ npm install   （下载依赖包）

运行该命令之后会出现一些配置信息，可以适当的修改

$ npm run dev  （运行下载完成的vue项目）

默认跳转地址：localhost:8080

2.vue基本语法

2.1.vue的简单使用例子：

<div id="main">
   <p>{{ message }</p>
</div>
<script>
/*vue的模板写法   */
   new Vue({         //实例化vue
       el:"#main",   //挂载的元素节点
       data:{        //数据
            message:"Hello world~"
       }
   })
</script>

此时会把message的值渲染到p标签中

2.2.v-的基础指令：

2.2.0.v-text指令无论内容是什么,只会解析为文本,解析文本使用v-text,需要解析html结构使用v-html

<div id="app">
      <h2 v-text="message+’!’"></h2>
      <h2>深圳{{ message + "! "}}</h2>
</div>
var app = new Vue({
            el:"#app",
            data:{
                message:"Hello"
            }
 })

2.2.1. v-html 指令用于输出 html 代码：

<div id="app">
      <p v-html=“content"></p>
</div>
var app = new Vue({
            el:"#app",
            data:{
                // content:"hello"
                content:"<a href='#'>Hello</a>"
            }
})

2.2.2. v-bind 指令用于绑定数据，

 <div id="app">
      <img v-bind:src= "imgSrc" >
 </div>
 var app = new Vue({
            el:"#app",
            data:{
      imgSrc:"图片地址",
   }
 })

2.2.3.v-if指令用于判断,根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)

div id="app">
      <p v-if="true">我是一个p标签</p>
 </div>
var app = new Vue({
            el:"#app",
            data:{
            }
 })

2.2.4.v-on指令用于监听DOM事件

<div id="app">
      <input type="button" value="事件绑定" v-on:click="方法">
      <input type="button" value="事件绑定" v-on:monseenter="方法">
      <input type="button" value="事件绑定" v-on:dblclick="方法">
</div>
<script>
  var app = new Vue({
            el:"#app",
            methods:{
            }
        })
</script>

2.2.5.v-model指令用于实现表单数据的双向绑定

 <div id="app">
      <input type="text" v-model="message" />
 </div>
 var app = new Vue({
        el: "#app",
        data: {
          message: "Hello"
        }
 })

2.2.6.v-show指令用于实现数据是否展现

 <div id="app">
      <img src="地址" v-show="true">
 </div>
 var app = new Vue({
            el:"#app",
            data:{
	isShow:true
            }
})

2.2.7.v-for指令可用实现数组的循环
其中的v-bind,v-on可以简写：

<p v-bind:message="hello"></p>可简化为：
<p :message="hello"></p>
<p v-on:click="demon"></p>可简化为:
<p @click="demon"></p>

2.2.8.axios的使用

<script src="https://unpkg.com/axios/dist/axios.min.js"></scrip   //数据请求地址
axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})
axios.post(地址).then(function(response){},function(err){})

var app = new Vue({
        el: "#app",
        data: {
          joke: "搞笑的笑话"
        },
        methods: {
          getJokes: function() {
            // this.joke 
            axios.get("地址").then(function(response) {
              // this.joke ?
            }, function(err) {});
          }
        }
  })

详情可以w3或者查看vue的官方API:
https://www.runoob.com/vue2/vue-tutorial.html
https://cn.vuejs.org/