什么是vue

vue是目前前端主流的js框架，它和库的区别在于：
库是更多是一个封装好的特定的集合，提供给开发者使用，而且是特定于某一方面的集合(方法和函数)，库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度理解库;
框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发。
当前主流的前端框架除了Vue还有React、Angular

Vue有什么优势

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页面应用。
Vue,js连续第4次登顶年度综合排行榜，它的GitHub在2019年新增了超过30k的star
Vue参考网站

Vue基础语法

1.导入vue.js

通过外部引入vue.js来初始化vue对象

外部cdn引入
本地导入

2.模板渲染

在引入vuejs文件后，需要在<script>标签中实例化vuejs对象才可以在网页中使用vuejs模板语法，即使用{{模板变量}}打模板语法渲染vue对象中的变量

<div id="app">{{message}}
</div>
<script src="./vue.js"></script>
<script>
var app = new vue({el:'#app',data:{message: 'He11o vue!'}
})
</script>

3.vue的插值

在vuejs语法中，可以在实例化的vue对象中的data属性里，直接定义变量通过模板渲染的方式直接将变量渲染到网页中或者时元素属性中

<div id="app">{{message}}<h1 :title='obj.age'>{{obj.name}}</h1>
</div>
<script src="./vue.js "></script>
<script>
var app = new vue({el: '#app',data: {message: 'He11o vue!'obj:{name: '张三”,age:8}}
})
</script>

vue对象中的data属性不仅可以用来文本渲染/属性渲染，也可以用来绑定切换class属性以及style

<div id="app">
<!-- 1，绑定class类名，通过字符串形式添加--><div :class='classstr'>我是通过字符串形式添加的类名</div>
<!--2，通过对象的形式绑定类名,判断对象里属性的布尔值进行添加class--><div :class='classobj'>通过对象绑定类名</div><button @click='classobj.red = !classobj.red'>切换</button>
<!--3.通过数组的形式绑定类名--><div :class='classArr'>通过数组绑定类名</div>
<!--1.通过字符串形式添加样式--><div :style='colorstr'>通过字符串形式添加样式</div>
<!--2.通过对象的形式添加样式--><div :style='colorobj'>通过对象的形式添加样式</div>
<!--3.通过数组的形式添加样式--><div :style='[colorobj, colorobj2]'>通过数组的形式添加样式</div></div>
<script>
new vue({el:'#app',data:{classstr:'red font-size25',classobj:{red:true,'font-size25 ' :true
},
classArr:['red', 'font-size25'],
colorstr: ' color:green',
colorobj:{color: ' green ',fontsize: ' 30px'
},
colorobj2:{fontweight: 'bo1d'}}
})
</script>

4. vue过滤器

vuejs提供了一个可以用来过滤当前模板渲染语法中内容的API，对网页中的内容文本进行过滤修改

<div id="app"><div>{{num | max10}}</div>
</div>
<script>
new vue({el: '#app',
data: {num: '111'}，
//过滤器对象，里面可以放多个过滤器
filters:{//当num超过时的时候,将显示的内容置为10
//value为需要过滤的参数
max10(value){if(value > 10)return 10}}
})
</script>

注意: filters对象为vuejs中的过滤器属性，里面可以存放多个不同的过滤器，每一个过滤器函数都要有一个返回值。

4.计算属性

计算属性用来监听多个数据，每次页面加载，计算属性中的函数立即执行，但是只要原数据不被修改，那么，就不会触发重新计算，计算属性会使用计算后的缓存结果，只当原数据修改时，才会重新计算并将结果缓存起来。计算属性的计算结果可以当做data中的数据一样使用。

<div id="app"><div>num当前是:{{num}}</div><div>1.当前num值是{{message}}</div><div>2.当前num值是{{msg}}</div><button v-on:click='change'>改变num的值</button>
</div>
<script>new vue({el: '#app',data: {num: 1,message:'奇数’},methods: {//每次点击后都会执行以下代码change(){this.num = Math. floor(Math .random( * 2)//判断奇数偶数this.message = this.num%2=0 ?'偶数’:'奇数'console.log('该函数被调用了')}
},
//计算属性
computed:{//计算属性会自动监听this.num 的值，只要在函数中影响到this.num的值,才会被调用msg(){console.log('计算属性被调用了')return this.num % 2 =- o?'偶数’:'奇数'}}
})
</script>

vue js基础语法相关推荐

Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...
（6）vue.js基础语法—插值表达式
一.vscode插件介绍在我们演示插值表达式之前,我们先安装这一个VScode给我们提供的插件,它可以将我们书写好的网页通过服务端口的方式进行访问,同时它的好处还有:再修改代码后,不需要我们手动点击 ...
（5）vue.js 基础语法—el选项
一.el选项介绍 • 用于选取一个 DOM 元素作为 Vue 实例的挂载目标. • 只有挂载元素内部才会被 Vue 进行处理,外部为普通 HTML 元素. • 代表 MVVM 中的 View 层(视图 ...
（4）vue.js 基础语法
Vue 实例是通过 Vue 函数创建的对象,是使用 Vue 功能的基础.我们想要使用Vue的功能,必须要实例化创建一个Vue的对象. <script>var vm = new Vue({/ ...
# vue.js 之对vue.js基础理解
vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...
小汤学编程之JavaScript学习day01——认识JS、JS基础语法
一.认识JS 1.JavaScript的组成 2.浏览器执行js简介 3.JavaScript是什么? 4.扩展内容二.JS基础语法 1.代码书写位置 2.变量 ...
前端三刺客---JS(基础语法)
文章目录 JS初识 JavaScript和HTML和CSS的关系 JavaScript代码运行过程 JavaScript的组成 JS 第一个Hello World JavaScript的书写格式 JS ...
Vue所有基础语法细节整理复习
本文已同步到:个人博客地址本文的所有截图均来自b战coderwhy老师的vue教学视屏,代码时自学自己照着敲的,我只不过是搬运工,如有侵权立即删除如果看完了这个vue基础,还可以看下面的: vue ...
Vue.js基础知识
一.Vue.js是什么? 它是一套用于构建用户界面的渐进式框架.其设计为自底向上逐层应用.Vue只关心视图层. 二.声明式的渲染 1. Vue.js的核心是采用简洁的模板语法来声明式地将数据渲染到DO ...

vue js基础语法

什么是vue

Vue有什么优势

Vue基础语法

1.导入vue.js

2.模板渲染

3.vue的插值

4. vue过滤器

4.计算属性

vue js基础语法相关推荐

最新文章

热门文章