我是一个前端初学者
而且这是我第一篇博客，我前面都没有这种写博客的习惯，但是我现在想养成一下这个好习惯，这个确实是可以记录我的学习记录的，只是我现在来说可能写的有点晚了，我已经学完了HTML,CSS和JS了，对于JS而言，这个语言确实是非常的强大的，我不敢说我学完了，前两种我也只敢说是浅尝辄止。
所以从Vue的学习开始我现在需要通过博客来记录我的学习生活了
今天是2020.1.31 在Vue学习了一阵，我先直接把写的代码贴上来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的vue学习</title>
<script src="./lib/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app1">
<!-- 使用v-cloak可以解决插值表达式的闪烁问题 -->
<p v-cloak>{{msg}}</p>
<!-- v-text也是会覆盖内部的内容的 -->
<h4 v-text = "msg"></h4>
<h4 v-text="msg">___!_!_!_</h4>
<!-- 默认v-text是没有闪烁问题的 -->
<!-- v-text会覆盖元素中原本的内容，但是插值表达式 只会替换自己的这个占位符，不会把整个的元素的内容清空 -->
<div>{{msg2}}</div>
<div v-text="msg2"></div>
<!-- v-html也会覆盖内部的内容 -->
<div v-html="msg2"></div>
<!-- 例子 ，这里面的+++++是不会显示的 -->
<div v-html="msg2">++++++++</div>
<!-- v-bind是vue中提供的用于绑定属性的指令 -->
<!-- v-bind可以被简写为： -->
<!-- v-bind可以在里面写合法的JS表达式 -->
<!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'" v-on:click="alert('hello!')"/> -->
<input type="button" value="按钮" v-on:click="show" />
<!-- 这里面v-on后面不只是click，可以是任意的事件，都可以进行触发 -->
</div>
<script>
var vm = new Vue({
el: '#app1',
data: {
msg:'123',
msg2:'<h1>哈哈哈哈我是h1</h1>',
mytitle:'这是一个自己定义的title'
},
methods:{//methods属性中定义了vue实例中所有可用的方法
show:function(){
alert('hello')
}
}
})
// document.getElementById('btn').onclick = function(){
// alert('hello');
// }
</script>
</body>
</html>1.对于Vue框架的引入
第一种方法是下载官网上的Vue文档，我也在上面的代码里有用
第二种方法是直接用CDN就行，我的代码里面也有使用
（http://doc.vue-js.com/v2/guide/installation.html )
2.学习内容
1.学的第一个是Vue的格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>w1w1</title>
<script src="./lib/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
msg:'欢迎学习vue'
}
})
</script>
</body>
</html>
- v-cloak可以对插值表达式的闪烁进行解决，不会因为网速的慢而导致插值表达式显示缓慢
- v-text其实可以完美解决v-cloak对于闪烁的问题，但是他们的不同在于v-text会覆盖掉它自身的内容，但是cloak却是不会的。
- v-bind 这里是直接可以进行简写的，简写方式是“：”，对！就是一个冒号，可以对变量进行绑定（动态地绑定一个或多个特性，或一个组件 prop 到表达式。
在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。 ） - 最后一个就是v-on了！它是一个绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
- 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。 同时对于事件在Vue里来说，是很排斥DOM事件的，所以我们引入methods，通过这个来进行事件函数的自我编辑
3.体会
我觉得Vue确实对于原先的我所学的三大语言进行了一定的绑定，但我现在才是刚开始入门，明天会继续学习的。同时我用了那么多的编译器，我现在找到了一个巨巨巨好用的，它就是HBuilderX 这个编译器真的太强大了，以后全用这个编译器了。
