新建index.html，直接复制以下代码，双击浏览器运行即可。代码包含Vue的基础语法，可对照练习。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<!--<script src="./vue.js"></script>-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h1>插值表达式</h1>
<p>{{msg}}</p>
<h1>v-text</h1>
<p v-text="number"></p>
<h1>v-html</h1>
<p v-html="content"></p>
<h1>事件绑定v-on:click</h1>
<p><button v-on:click="handleClick">点我啊</button></p>
<h1>v-on:click可简写为@click</h1>
<p><button @click="handleClick">点我啊</button></p>
<h1>面向数据编程，改变数据来改变DOM，不直接操作DOM</h1>
<p>
<div>{{oldContent}}</div><br/>
<button v-on:click="handleChangeDom">点击改变DOM内容</button>
</p>
<h1>属性绑定v-bind:</h1>
<p title="我是一个P标签">我是一个P标签，使用原生title</p>
<p v-bind:title="title">我是一个P标签，使用v-bind:title</p>
<p :title="title">我是一个P标签，使用v-bind:title的简写:title</p>
<p :title="'文本'+title">我是一个P标签，使用v-bind:title的简写:title，title里还加了文本</p>
<h1>双向数据绑定 v-model="inputValue"</h1>
<input v-model="inputValue"/>
<p>我跟上面的input输入框进行了绑定，它变我也变。</p>
<p><b>{{inputValue}}</b></p>
<h1>计算属性</h1>
输入你的姓：<input v-model="firstName" placeholder="初始值姓"/><br/>
输入你的名：<input v-model="lastName" placeholder="初始值名"/><br/>
<p>你的姓名是：{{fullName}}</p>
<h2>监听器watch，监控数据变化</h2>
<p>姓+名change次数总共是{{count}}</p>
<h1>v-if 显示隐藏</h1>
<p v-if="isvifShow">显示还是隐藏，这是个问题。</p>
<button @click="changeStatusvif">显示/隐藏</button>
<h1>v-show 显示隐藏</h1>
<p v-show="isvshowShow">显示还是隐藏，这是个问题。</p>
<button @click="changeStatusvshow">显示/隐藏</button>
<h1>v-for 循环</h1>
<ul>
<li v-for="(item,index) of list" :key='index'>{{item}}</li>
</ul>
<p><br/>========================我是分割线========================<br/></p>
</div>
<script>
new Vue({
el:"#root",
//template:'<p>{{msg}}</p>',
data:{
msg:"hello world",
number:123,
content:'<h2>我是h2标题</h2>',
oldContent:'原来显示的内容：123',
title:"我是一个P标签",
inputValue:"我是初始值",
firstName:'',
lastName:'',
count:0,
isvifShow:true,
isvshowShow:true,
list:[111,222,333,444]
},
methods:{
handleClick:function(){
alert("我被点击了！")
},
handleChangeDom(){
this.oldContent='现在显示的内容：456'
},
changeStatusvif(){
this.isvifShow= !this.isvifShow
},
changeStatusvshow(){
this.isvshowShow= !this.isvshowShow
}
},
computed:{
fullName:function(){
return this.firstName + ' '+ this.lastName
}
},
watch:{
firstName:function(){
this.count ++
},
lastName:function(){
this.count ++
}
}
})
</script>
</body>
</html>最简单的vue入门：基础语法学习
猜你喜欢
转载自blog.csdn.net/Irene1991/article/details/83617967
今日推荐
周排行