前端不会vue，找实习太难了，现在开始学习一下vue，文章就当做学习笔记，供以后复习看看。
起步
首先安装vue.js的源码，这个直接去官网 https://cn.vuejs.org/v2/guide/安装即可，下载完之后把js代码放入项目当中引用即可，不过在实际项目中，访问js代码需要重新设置位置还要调整配置，还可能影响访问网页的时间，因此建议采用cdn访问
https://cdn.staticfile.org/vue/2.2.2/vue.min.js
或者自己上传到码云生成链接来访问这样可以节约资源。
下载好之后开始编写第一个程序，helloworld，代码如下：
<div id="app">
<p>
{{msg}}
</p>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
msg:'hello world!'
}
})
</script>在代码中，用new Vue创建Vue对象，然后通过el绑定元素，data中的值覆盖整个{{}}，其中el可绑定元素，可绑定class也可以绑定id，但是id和class不能是纯数字，不然无法替换。
基础指令（一）
v-cloak
用于解决网速过慢时候{{}}出现的问题，直接放在变量所在的标签即可如下
<div id="app" class="jk" >
<p v-cloak>11{{msg}}</p>
</div>[v-cloak]{
display: none;
}但这个指令不会完全替换标签内的文本上面代码中的11会被渲染出来，想要完全替换可以使用下面这个指令
v-text
可完全提换标签内的文本，使用方法如下面代码
<div id="app" class="jk" >
<p v-text="msg">11{{msg}}</p>
</div>
</body>
<script>
new Vue({
el:'.jk',
data:{
msg:'hello world!'
}
})
</script>但是v-text只是替换文本（文本中可携带变量不是变量的用‘’标识，如'今天'+date+'号',date类似{{date}}，可在Vue中进行操控），如果要插入html的文本，让他以html代码形式渲染就用v-html指令
v-html
这个指令会将变量以html的标签解析后输出，和v-text一样用法如下代码
<div id="app" class="jk" >
<p v-html="msg">fdfsfd</p>
</div>
</body>
<script>
new Vue({
el:'.jk',
data:{
msg:'<h1>hello world!</h1>'
}
})
</script>v-bind
提供绑定属性的功能，绑定的属性的值会当成js代码执行，代码如下
<div id="app" class="jk" >
<p>{{msg}}</p>
<input type="button" value="woc" v-bind :title="mytitle +'123'">
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
msg:'<h1>hello world!</h1>',
mytitle:'wdnmd'
}
})需要注意，在webstorm中，v-bind:和v-on：会报错，查询资料后可通过取消勾选xml中的文件解决，解决方法链接
v-on
这个指令绑定的是事件缩写为@，针对被绑定的事件，我们需要编写函数用于这个事件触发后的会发生什么，这时候在Vue对象中，methods方法用于声明函数的作用，具体写法如下：
<div id="app" class="jk" >
<p>{{msg}}</p>
<input type="button" value="woc" v-bind :title="mytitle +'123'" v-on:click="show">
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
msg:'<h1>hello world!</h1>',
mytitle:'wdnmd'
},
methods:{
show: function () {
alert('helloworld')
}
}
})下图是截取b站vue教程中老师绘制的mvvm图，用于明确前后端的流程
