wap网站微信客服代码如何自创网站
什么是Vue?
Vue的概念
Vue是一个用于构建用户界面的渐进式框架(通过数据渲染出用户所能够看到的界面)
Vue的两种使用方式
1:Vue核心包开发
场景:局部模块的改造
2:Vue核心包&Vue工程化的开发
场景:整站开发
Vue开发的优缺点:
优点 :提高开发的效率,约提高70%之上,一套完整的项目解决方案
缺点:需要使用Vue框架的规则去实现,需要去记忆
你如果学过Java语言,那么你在学习这套框架,就会轻松一点,很多的知识点一看就能够看懂,不学过也没有关系,Vue框架规则十分的通俗易懂。
学习进入Vue世界的第一个案例:
直接上代码:
将数据渲染在页面上
body><!-- 第一步:准备容器 --><div id="app">{{msg}}</div><!-- 第二步:引包(官网):有两种版本,开发版本/生产版本:两种版本的应用场景不同 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 第三步:创建Vue实例 --><script>const app = new Vue({// el指定挂载点el: '#app',// data方法是提供数据data:{msg:"不想睡醒的梦"}})</script>
</body>
运行页面
Vue指令
Vue会根据不同的指令实现不同的功能,Vue拥有着自身的一套规则
指令:带有v-前缀的特殊标签属性
<!--普通标签的属性-->
<div class="demo1"> </div>
<!--Vue框架的标签的属性-->
<div v-html="demo1"></div>
v-html:
作用:设置元素的InnerHTML(Html中的标签内容)
语法:v-html="表达式"
代码演示:代码实现的功能就是超链接
<body>
<div id="demo1"><div v-html="msg"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>//引入了const app = new Vue({el:'#demo1',data:{msg: '<a href="