从零开始的VUE.js学习（一）

前端不会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中的文件解决，解决方法链接https://blog.youkuaiyun.com/WinstonLau/article/details/82849219?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

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图，用于明确前后端的流程