vue.js是现阶段比较热门的一个Javascript MVVM库。vue.js非常易于上手,而且其官网文档的教程非常详细易懂。
在自己学习的过程中,为了方便,便直接在新建的html页面中引用了Vue的CDN地址。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
------------------------------------------------------------------------------------------------------------------------
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
比如:
//在html中绑定一个id
<div id="app">
<p>{{ message }}</p>
</div>
//在js中渲创建一个vue,连接上面的view
new Vue({
el:'#app',
data:{
message:'Hello Vue.js!'
}
});
同时,vue.js还可以双向绑定。
<div id="app2">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app2 = new Vue({
el: '#app2',
data: {
message: 'Hello Vue!'
}
})
实现的效果就是文本跟随输入框同步变化,或者文本框中的内容变化时,输入框中的value值也会随之改变。
这是两个能体现出vue.js使用简单,功能强大的例子。
然后学习了vue.js的一些指令。指令的前面加上v-代表它是vue的特性。比如,条件指令用v-if;循环指令用v-for;v-on指令用来监听事件等。使用过vue的这些指令之后,会觉得vue用起来真的很方便。
然后在学习过程中主要的问题就是,用vue.js时一定要很细心,很多细节比如分号,括号这些稍微不注意都会使页面无法正常运行,比如我在练习的过程中,明明是跟着文档中的例子写的,却会报错,这时候就要找找自己是不是粗心的原因了。当然,不管写什么语言,细心很重要。
初次学习的内容不是很多,学习的同时也要注意打好Javascript基础。