Java⼿写笔记-前后端分离框架Vue+ElementUI⼊门⼀篇就够（作者原创）个⼈主页
个⼈简介
作者是⼀个来⾃河源的⼤三在校⽣，以下笔记都是作者⾃学之路的⼀些浅薄经验，如有错误请指正，将来会不断的完善笔记，帮助更多的Java爱好者⼊门。
Vue2框架-2.9.6
该Vue2⼊门笔记所参考的是：Vue.js官⽅⽂档、尤⾬溪讲解视频(中⽂翻译版)、以及诸多CSDN笔记、知乎等，仅供⼊门参考，不作任何深⼊研究！
起步
编译器选择
IDEA（不推荐），IDEA开发Vue应⽤的代码提⽰不太友好
Hbuilder （不推荐），Hbuilder速度慢，HbuilderX是⽤C++进⾏重写，速度更快
HbuilderX （推荐），Vue的合作伙伴，代码提⽰很好，官⽅也推荐
vs code (推荐)，但没⽤过
CDN安装Vue
<!-- 开发环境版本，包含了有帮助的命令⾏警告 -->
<script src="cdn.jsdelivr/npm/vue@2/dist/vue.js"></script>
或者
<!-- ⽣产环境版本，优化了尺⼨和速度 -->
<script src="cdn.jsdelivr/npm/vue@2"></script>
第⼀个Vue程序
<div id="vue-app">
{{content}}
</div>
<!-- 开发环境版本，包含了有帮助的命令⾏警告 -->
<script src="cdn.jsdelivr/npm/vue@2/dist/vue.js"></script>
<script>
var vue =new Vue({
el:'#vue-app',//绑定元素
data:{//传⼊到绑定元素的数据
content:'hello world'
}
});
</script>
v-bind
v-bind的作⽤是绑定属性，例如v-bind:src，就是绑定了src属性，我们可以在vue对象⾥⾯更改即可
绑定属性语法有两种
v-bind:src
:src
上⾯这两种⽅式等价
<html lang="en"v="/1999/xhtml"v-bind="/1999/xhtml">
<div id="vue-app">
<span title="currentTime">vue</span>
</div>
<!-- 开发环境版本，包含了有帮助的命令⾏警告 -->
<script src="cdn.jsdelivr/npm/vue@2/dist/vue.js"></script>
<script>
var vue=new Vue({
el:'#vue-app',
data:{
currentTime:'页⾯加载于 '+new Date().toLocaleString()
}
});
</script>
然后在浏览器控制台输⼊vue.currentTime=‘v-bind触发了’，就会发现内容被更改了
v-text
v-text和{{}}⾮常相似，其实他们两个作⽤也是差不多的。
<!-- v-text取值-->
<h2 v-text="content"></h2>
<!-- {{}}取值-->
<h3>⽂本：{{content}}</h3>
</div>
<div id="vue-app2">
<!-- v-text取值-->
<h2 v-text="arr"></h2>
<!-- {{}}取值-->
<h3>⽂本：{{arr}}</h3>
<!-- 取数组指定下标元素 -->
<h3>{{arr[2]}}</h3>
<h2 v-text="arr[1]"></h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令⾏警告 -->
<script src="cdn.jsdelivr/npm/vue@2/dist/vue.js"></script> <script>
var vue1=new Vue({
el:'#vue-app1',
data:{
content:'我是内容'
}
});
var vue2=new Vue({
el:'#vue-app2',
data:{
arr:['1','2','3','4','5','6']//传⼊数组
}
});java网课推荐
</script>
v-html
v-text和v-html虽然看起来差不多，但是还是有很⼤的不同。
v-text传⼊的数据不会转义成html语句
v-html传⼊的数据会转义成html语句展⽰
例⼦：
<span>---------v-text</span>
<br />
<span v-text="content">
</span>
<br />
<span>---------v-html</span>
<br />
<span v-html="content">
</span>
</div>
<!-- 开发环境版本，包含了有帮助的命令⾏警告 -->
<script src="cdn.jsdelivr/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
var vue=new Vue({
el:'#vue-app',
data:{
content:'<a href=\"gitee/youzhengjie\">个⼈主页</a>'
}
});
</script>
计数器案例：v-on/@
定义vue的事件⽅法必须在vue对象⾥⾯的methods定义，⽽不能在vue对象外定义methods的事件语法规则：
⽅法名:function(也可以写⽅法参数){js语法}
绑定单击事件⽅法，两种⽅法等价
v-on:click=“sub()”
@click=“add()”
案例
<!-- 绑定事件 -->
<input type="button"value="-"click="sub()">
<span>{{num}}</span>
<input type="button"value="+"@click="add()">
</div>
<!-- 开发环境版本，包含了有帮助的命令⾏警告 -->
<script src="cdn.jsdelivr/npm/vue@2/dist/vue.js"></script>
<script>
var vue =new Vue({
el:'#vue-app',
data:{
num:1
},
//定义vue的事件⽅法必须在vue对象⾥⾯的methods定义，⽽不能在vue对象外定义。。。。
methods:{
sub:function(){
this.num--;
console.log(this);//这⾥的this等价于进⼊到data⾥⾯了
},
add:function(){
this.num++;
console.log(this.num);
}
}
});
</script>
v-show
v-show=“布尔值”，如果布尔值为true说明展⽰，反之为false则隐藏，底层是通过修改css样式进⾏隐藏的<div id="vue-app">
<h3 v-show="v1">v1</h3>
<h3 v-show="v2">v2</h3>
<h3 v-show="3>=5">v3</h3>
<h3 v-show="5>3">v4</h3>
</div>
<!-- 开发环境版本，包含了有帮助的命令⾏警告 -->
<script src="cdn.jsdelivr/npm/vue@2/dist/vue.js"></script>
<script>
var vue=new Vue({
el:'#vue-app',
data:{
v1:true,
v2:false
}
});
</script>
v-if

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。