Vue.js 快速入门
程序员文章站
2022-06-06 20:16:10
...
阅读者你好！????如果您是编程高手，请误笑我的无知。
由于本人是一个编程界菜鸟，希望通过写博客的方式激励自己不断的学习
学无止尽，嘿嘿！????我会继续加油的！
- 渐进式框架（渐进增量的设计原则）
- MVVM（模型、视图、模型视图）View（界面） 和 Model(数据)是独立的，ViewModel是它们的桥梁
- Vue对View和Model之间的更新操作做了自动化处理
- 一个响应式的数据系统，能通过轻量级的虚拟DOM引擎和最少的优化工作来自动更新用户界面
- 由可维护、可复用组件构成的组件化用户界面
- 有很多稳定的组件库
注意：兼容性要求，可以在所以兼容ECMAScript 5的浏览器中使用，不支持IE 8一下
第一个例子
<html>
<head charset="utf-8">
<title>第一个VueJs实例</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
</div>
</body>
<script>
console.log("vue.js版本：", Vue.version);
var app = new Vue({
name: 'MyView',
el: '#app',
data() {
return {
message: 'Hello Vue.js！',
}
}
})
</script>
</html>
实例解析
-
<script src="https://unpkg.com/vue/dist/vue.js"></script>vue.js库向外提供了一个Vue对象，该对象包含使用Vue所需的所有功能
-
name: 'MyView'Vue实例的名称
-
new Vue({})构建一个新的实例，参数是一个option对象，可以携带多个属性
-
el: '#app'el属性，使用CSS选择器告知Vue将实例，添加（挂载）到Web页面的哪个DOM元素中，也可以通过Vue实例对象，app.开头
-
data(){return {}}数据
文本插值
用于Web页面中显示动态的文本
-
语法：
{{}}，双花括号包含单个任意类型的Javascript表达式，当Vue处理时，{{}}会被结果替换，例如：
html <div id="app"> <p>{{info}}</p> <div>
指令（基本的用户交互）
Vue中的指令，v-前缀
- v-model 将form表单的输入组件与Vue属性绑定，例如：
<body>
<div id="app">
<input v-model="name"/>
<p>{{name}}</p>
</div>
</body>
<script>
var app = new Vue({
name: 'MyView',
el: '#app',
data(){
return {
name: ''
}
}
})
</script>