前端知识-Vue.js入门
一、介绍
1、Vue.js 是什么
在为 AngularJS 工作之后，Vue 的作者尤雨溪开发出了这一框架。他声称自己的思路是提取 Angular 中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue 最早发布于 2014 年 2 月。作者在 Hacker News、Echo JS 与 Reddit 的 javascript 版块发布了最早的版本。一天之内，Vue 就登上了这三个网站的首页。Vue 是 Github 上最受欢迎的开源项目之一。同时，在 JavaScript 框架/函数库中，Vue 所获得的星标数已超过 React，并高于 Backbone.js、Angular 2、jQuery 等项目。
Vue.js 是一款流行的 JavaScript 前端框架，目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，实现视图与模型的交互。
官方网站：https://cn.vuejs.org
2、初识Vue.js
创建文件夹vuejs，将vue.min.js引入文件夹
CDN引入方式：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<body><div id="app">{}} 插值表达式，声明式渲染，绑定vue中的data数据 -->{{ message }}div><script src="vue.min.js">script><script>// 创建一个vue对象new Vue({//绑定vue作用的范围el: '#app',//定义页面中显示的模型数据data: {message: 'Hello Vue!'}})script>body>
这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作
data: {message: 'Hello Vue!'
}
也可以写成
data() {return {message: 'Hello Vue!'}
}
二、基本语法
1、基本数据渲染和指令 v-on (😃
<script src="vue.min.js">script>
<script>new Vue({el: '#app',data: {name: 'Helen'}})
script>
你看到的 v-bind 特性被称为指令。指令带有前缀 v-
除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）
<div id="app"><h1 v-bind:title="name">{{name}}h1><h1 :title="name">{{name}}h1>
div>
2、双向数据绑定 v-model
<script src="vue.min.js">script>
<script>new Vue({el: '#app',data: {keyword: '尚硅谷'}})
script>
双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定
<div id="app"><input type="text" v-bind:value="keyword"><input type="text" v-model="keyword"><p>您要查询的是：{{keyword}}p>
div>
什么是双向数据绑定？
-
当数据发生变化的时候，视图也会跟着发生变化
-
- 数据模型发生了改变，会直接显示在页面上
-
当视图发生变化的时候，数据也会跟着同步变化
-
- 用户在页面上的修改，会自动同步到数据模型中去
3、事件 v-on (@)
创建 03-事件.html
使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中
<div id="app"><button v-on:click="show()">查询button>
div><script src="vue.min.js">script>
<script>
new Vue({el: '#app',methods: {show() {console.log(new Date())}}
})
script>
v-on 指令的简写形式
<button @click="search()">查询button>
4、修饰符 (.)
修饰符是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，这里的 .prevent 修饰符告诉 v-on 指令：阻止表单默认的提交行为
<div id="app"><form action="save" v-on:submit.prevent="check()">姓名：<input type="text" v-model="user.username"><button type="submit">保存button>form>
div>
<script src="vue.min.js">script>
<script>new Vue({el: '#app',data: {user: {}},methods: {check(){console.log(this.user.username)if(!this.user.username){alert('请输入姓名')return}//ajax提交console.log('ajax提交')}}})
script>
5、条件渲染 v-if v-show
<script src="vue.min.js">script>
<script>new Vue({el: '#app',data: {ok: false}})
script>
点击复选框，显示或隐藏协议内容。分别使用 v-if 和 v-show 实现
v-if直接删除DOM
v-show是添加一个css属性 display:none
<div id="app"><input type="checkbox" v-model="ok">同意许可协议<h1 v-if="ok">if：协议内容.h1><h2 v-else>noh2><h3 v-show="ok">show：协议内容.h3><h4 v-show="!ok">noh4>
div>
经常发生改变的DOM最好使用v-show！！！
6、列表渲染 v-for="(item,index) in list"
<script src="vue.min.js">script>
<script>new Vue({el: '#app',data: {userList: [{ username: 'helen', age: 18 },{ username: 'peter', age: 28 }]}})
script>
v-for：列表循环指令
<div id="app"><table style="border:1"><tr v-for="(item, index) in userList"><td>{{index}}td><td>{{item.username}}td><td>{{item.age}}td>tr>table>
div>
7、实例生命周期 created=>mounted
<div id="app"><h3 id="h3">{{ message }}h3>
div>
分析生命周期相关方法的执行时机
<script src="vue.min.js">script>
<script>new Vue({el: '#app',data: {message: '床前明月光'},// 页面在内存中已经初始化完毕：// 可以操作 data 中的数据、调用methods中的方法// 但是数据尚未被渲染到页面中：用户看不见created() {console.log('created')//可以操作 data 中的数据console.log(this.message)//可以调用methods中的方法this.show()//无法取出dom节点取数据，说明用户无法在浏览器中看见这个内容console.log(document.getElementById('h3').innerText)},// 数据已经被渲染到页面中mounted() { // 第四个被执行的钩子方法console.log('mounted')//可以取出dom节点取数据，说明用户已经在浏览器中看见内容console.log(document.getElementById('h3').innerText)},methods: {show() {console.log('show方法被调用')}},})
script>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！