小皇受独自学习Vue的第一天

第一次使用博客，最多只是自己娱乐而已，希望能坚持下去，早日成为加入删库跑路的一员中！

CDN的引用

在HTML中，引用Vue.js非常方便，只需要在head中导入Vue.js的地址即可（地址可储存在本地，也可以直接在线引用）

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--上面地址是直接从Vue.js官方网站中获取的：20210615-->

引入后，实例化一个Vue对象，通过新建一个app.js对根容器进行实例化（实际上在

<div id="vue-app"></div>
<script src="app.js"></script>

创建以上容器后，创建JS文件，进行实例化

new Vue({
	el:"#vue-app"
})；

以上就可以创建实例化了，创建后所有对上面根容器 <div >进行的编辑美化都可以在JS文件中完成
el：element 需要获取的元素，一定是HTML中的根元素 如id

Vue中几个关键的参数：data / methods

new Vue({
	el:"#vue-app",
	data:{
		name:"张三",
		job:"程序员"
	},
	methods:{
		greet:function(){
			return '你好，我是：'+ this.name;
			}
	}
})；

data：用户存储数据的参数
methods：用户存储方法的参数

HTML中的调用

<div id="vue-app">
	<h1>{{greet()}}</h1>
	<p>{{name}}</p>
	<p>Job: {{job}}</p>
</div>
<script src="app.js"></script>

可以在根容器下的标签中直接使用

绑定关系

当遇到需要将标签中的某些元素进行绑定修改时，需要用到：v-bind / v-html

new Vue({
	el:"#vue-app",
	data:{
		web:"www.baidu.com",
		webTag:"<a href='www.baidu.com'>百度搜索-1</a>"
	},
	methods:{
        greet: function(time){
           return time +" 姓名：" +this.name;
       }
	}
});

HTML中的调用

<h1>{{greet("下午好")}}</h1>		<!-- 通过传参数(time)进行调优方法 -->
<a v-bind:href="web">百度搜索</a>	<!-- 通过v-bind将href中的链接与Vue-data的链接进行绑定 -->
<input type="text" v-bind:value="web">
<p  v-html="webTag"></p>	<!-- 通过v-html将HTML代码进行插入到标签中，注意：只能是标签中 -->

如上便是初步了解了Vue.js的基本使用了