Vue——01起步、模板语法、条件语句
导读：通过以下代码获取Vue.js<script src="https://cdn.jsdelivr.net/npm/vue"></script>Vue是一种声明式的变成，而原生js是命令式编程 命令式编程（原生JS）：创...
通过以下代码获取Vue.js
script src="https://cdn.jsdelivr.net/npm/vue">
/script>
Vue是一种声明式的变成，而原生js是命令式编程
命令式编程（原生JS）：
创建div元素，设置id属性
定义一个变量叫message
将message变量放在div元素中显示
修改message数据
将修改的元素替换到div
声明式编程（Vue）：
创建一个div元素，设置id属性
定义一个vue对象，将div挂载在vue对象上
在vue对象内定义变量message，并绑定数据
将message变量放在div元素上显示
修改vue对象中的变量message，div元素数据自动改变
下面是基础用法：
Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。
data 用于定义属性，本实例中写了一个属性为message。
methods 用于定义的函数，可以通过 return 来返回函数值
{ { } } 用于输出对象属性和函数返回值。
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta http-equiv="X-UA-Compatible" content="IE=edge">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>
创建一个动态的div/title>
script src="js/vue.js">
/script>
/head>
body>
!-- 首先创建一个div盒子他的ID为box -->
div id="box">
{
{
message}
}
!-- {
{
}
}
用于输出对象属性和函数返回值。 -->
/div>
button @click="fn1()">
点击按钮/button>
!-- 点击事件的写法 -->
script>
var box = new Vue({
el:'#box', !-- 有一个el 参数，它是 DOM 元素中的 id,也就是上方div中的box -->
data:{
!-- data：定义属性 -->
message:'你好'!-- 如果要是多个属性就用,隔开 -->
}
,
methods:{
!-- methods 用于定义的函数，可以通过 return 来返回函数值-->
fn1:function(){
console.log('你点击了此按钮');
}
}
}
)
/script>
/body>
/html>
效果如下：
可以通过F12调用到控制台，去更改Vue对象的message的值
Vue模板语法：
指令
指令是带有 v- 前缀的特殊属性，用于在表达式的值改变时，将某些行为应用到 DOM 上。
v-html ：有时候我们不希望直接输出h1> 欢迎学习Vue/h1> 这样的字符串，而输出被html自己转换的h1的文字，此时可以使用v-html
div id="box">
div v-html='message'>
/div>
/div>
script>
var box = new Vue({
el:'#box',
data:{
message:'h1>
欢迎学习Vue/h1>
',
}
,
}
)
/script>
效果如下：
v-on ：监听DOM v-on:click 也可以写成 @click 后者是其语法糖
举个例子：
!-- 首先创建一个div盒子他的ID为box -->
div id="box">
!-- button v-on:click='add()'>
+/button>
-->
button @click='add()'>
+/button>
!-- 这两种方法都可以 -->
h2>
{
{
count}
}
/h2>
/div>
script>
var box = new Vue({
el:'#box',
data:{
message:'欢迎学习Vue',
count:0,
}
,
methods:{
add:function(){
this.count++
}
!-- 两种写法都可
add(){
this.count++
}
-->
}
}
)
/script>
效果如下：
v-once：表示该dom元素只渲染一次，之后数据改变，不会再次渲染
举个例子：
div id="box">
h2>
{
{
message}
}
/h2>
div v-once>
{
{
message}
}
/div>
div v-once>
{
{
message}
}
/div>
/div>
script>
var box = new Vue({
el:'#box',
data:{
message:'欢迎学习Vue',
}
,
}
)
/script>
v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
div id="box">
p>
{
{
message }
}
/p>
input v-model="message">
/div>
script>
var box = new Vue({
el: '#box',
data: {
message: '欢迎学习Vue',
}
,
}
)
/script>
v-bind ：指令被用来响应地更新 HTML 属性
!-- 完整语法 -->
a v-bind:href="url">
/a>
!-- 缩写 -->
a :href="url">
/a>
v-bind:title 我们也可以写成:title 后者是其语法糖，其作用当鼠标悬停在某段文字上时会出现提示
感兴趣的可以自己去尝试一下。
v-if：彻底消失
v-show此消失是等于display：none；经常做开销比较大的显示和消失，建议用v-show
div id="box">
h2 v-if="seen">
seen/h2>
h2 v-show="show">
show/h2>
/div>
script>
var box = new Vue({
el: '#box',
data: {
seen:true,
show:false,
}
,
}
)
/script>
v-pre：有时候我们期望直接输出{ { message} } 这样的字符串，而不是被{ { } } 语法转换的message的变量值，此时我们可以用v-pre标签
div id="box">
h1 v-pre>
{
{
message}
}
/h1>
/div>
script>
var box = new Vue({
el: '#box',
data: {
message:'你好'
}
,
}
)
/script>
效果如下：
v-text：覆盖dom元素中的数据，相当于js的innerHTML方法
div id="box">
h1 v-text='p'>
{
{
message}
}
/h1>
/div>
script>
var box = new Vue({
el: '#box',
data: {
message:'你好',
p:'我很好'
}
,
}
)
/script>
Vue.js条件语句：v-if、v-else-if、v-else直接看例子：
div id="box">
h2 v-if="age60">
不及格/h2>
h2 v-else-if="age95">
良好/h2>
h2 v-else>
优秀/h2>
/div>
script>
var box = new Vue({
el: '#box',
data: {
age:88
}
,
}
)
/script>
v-for ：可以绑定数据到数组来渲染一个列表
切换栏效果：
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta http-equiv="X-UA-Compatible" content="IE=edge">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>
遍历列表/title>
script src="js/vue.js">
/script>
style>
ul li{
cursor: pointer;
}
.active {
color: #f00;
}
/style>
/head>
body>
!-- 首先创建一个div盒子他的ID为box -->
div id="box">
ul>
!-- li v-for='(item,index) in movies' :key='index' :class="{
active:currentIndex === index}
"
@click="change(index)">
{
{
item}
}
-------{
{
index}
}
/li>
-->
!-- li v-for='(item,index) in movies' :key='index' :class="currentIndex === index?'active':''"
@click="change(index)">
{
{
item}
}
-------{
{
index}
}
/li>
-->
li v-for="(item,index) in movies" :key="index" :class="getStyle2(index)" @click="change(index)">
{
{
item}
}
-------{
{
index}
}
/li>
/ul>
/div>
script>
var box = new Vue({
el: '#box',
data: {
movies: [
"海王", "海贼王", "火影忍者", "复仇者联盟"
],
currentIndex: 0,
}
,
methods: {
change(index) {
// this.currentIndex = index
if (this.currentIndex === index)
return;
this.currentIndex = index
}
,
getStyle() {
return {
active: this.isActive
}
}
,
getStyle2(index) {
return {
active: this.currentIndex === index
}
}
}
}
)
/script>
/body>
/html>
获取图片以及链接用法：
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta http-equiv="X-UA-Compatible" content="IE=edge">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>
v-bind/title>
script src="https://cdn.jsdelivr.net/npm/vue">
/script>
style>
img{
width: 300px;
}
/style>
/head>
body>
div id="box">
h2>
{
{
message}
}
/h2>
img :src="imgURL" alt="">
a :href="aHerf">
百度一下/a>
/div>
script>
var box = new Vue({
el:'#box',
data:{
message:'Hello Vue',
aHerf:"https://www.baidu.com",
imgURL:"https://desk-fd.zol-img.com.cn/g5/M00/02/00/ChMkJlbKw5aIY6PYAA0XnsktgwEAALG5QPtg4wADRe2915.jpg",
}
,
methods:{
}
}
)
/script>
/body>
/html>
效果如下：
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Vue——01起步、模板语法、条件语句
本文地址： https://pptw.com/jishu/8604.html