Vue.js 知识点总结(入门上手)

文章目录

Vue.js 是什么?

Vue.js 知识点总结(入门上手)
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。


使用vue前要先引入vue,有两种方式可以引入vue
(1)一种是在线通过javascript 引入cdn
(2)一种是通过npm安装引入

我们这里使用在线引入vue的方法,引入在线版本的vue(当然你也可以直接下载vue.js文件到本地引入)

<script src="https://unpkg.com/vue/dist/vue.js">
</script>

Vue的第一个简单应用

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="hello">
<h1>{{say}}</h1>
</div>
<script>
new Vue({
	el:'#hello',//绑定到id为hello的dom上
	data:{
		say:"hellochanke"
	}
})
</script>

Vue.js 知识点总结(入门上手)
在这个小实例中,顺序是:
(1)先引入库
(2) 然后给元素添加id,通过new一个Vue,Vue对象内包含需要绑定的元素(el)和要定义的数据(data)
(3) 当在浏览器查看时,Vue中的data中的say 通过绑定的id为hello的元素传值过去{{say}}的值为hellochanke


Vue的绑定事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue数据绑定演示</title>
</head>

<body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <div id="hello">
        你要改变的名字为:<input type="text" v-on:input="changeName">
    <h1>{{say}}</h1>
    </div>
    <script>
    new Vue({
        el:'#hello',
        data:{
            say:"数据库爆破专家Kok"
        },
        methods:{
        changeName:function(event){
        this.say=event.target.value; //特别注意,这里的say需要用this指定
        }
        }
    })
    </script>
</body>

</html>

当点击input框有数值输入后,{{say}}的指向会发生改变,变为event.target.value
Vue.js 知识点总结(入门上手)

上一篇:codewars练习知识总结


下一篇:TS简明教程(2)——类与接口