阜阳网页设计-高端网站设计公司
对于新手制作一个网站感觉不知道从哪里开始,面对挑选供应商、规划网站内容等等,不过,在讨论网站需要花费多少费用前,您可以先确认网站架构和我们将要面向的用户。同样,如何升级或者改版一个网站,同样需要面临一些挑战。
企业品牌官网建设
遵循以下原则开展工作,将起到事半功倍的效果。
定义您网站的目的和策略
研究最新的网页设计趋势
选择您的平台
决定你的品牌
添加和优化内容
发布您的网站
在此过程中进行分析和改进
我们为不同的访问者设置单独的登陆页面的重要性,以便单独定制优惠和产品——这个过程被称为客户细分。细分您的流量以提供更相关的体验是您迈向个性化用户体验以及随之而来的业务成功之旅的第一步。
了解最新网页设计趋势
网页设计发展迅速,但您可以学习一些更流行的趋势。在这一点上,重要的是要注意,仅仅因为 Web 趋势是最新的,并不意味着它一定
Vue.js 实例
本章节为大家介绍几个 Vue.js 实例,通过实例练习来巩固学到的知识点。
导航菜单实例
导航菜单
创建一个简单的导航菜单:
<div id="main">
<nav v-bind:class="active" v-on:click.prevent>
<a href="#" class="home" v-on:click="makeActive('home')">Home</a>
<a href="#" class="projects" v-on:click="makeActive('projects')">Projects</a>
<a href="#" class="services" v-on:click="makeActive('services')">Services</a>
<a href="#" class="contact" v-on:click="makeActive('contact')">Contact</a>
</nav>
<p>您选择了 <b>{{active}} 菜单</b></p></div>
<script>// 创建一个新的 Vue 实例
var demo = new Vue({
// DOM 元素,挂载视图模型
el: '#main',
// 定义属性,并设置初始值
data: {
active: 'home'
},
// 点击菜单使用的函数
methods: {
makeActive: function(item){
// 模型改变,视图会自动更新
this.active = item;
}
}
});</script>
尝试一下 »
编辑文本实例
文本编辑
点击指定文本编辑内容:
<div id="main" v-cloak v-on:click="hideTooltip">
<div class="tooltip" v-on:click.stop v-if="show_tooltip">
<input type="text" v-model="text_content" />
</div>
<p v-on:click.stop="toggleTooltip">{{text_content}}</p>
</div>
<script>var demo = new Vue({
el: '#main',
data: {
show_tooltip: false,
text_content: '点我,并编辑内容。'
},
methods: {
hideTooltip: function(){
// 在模型改变时,视图也会自动更新
this.show_tooltip = false;
},
toggleTooltip: function(){
this.show_tooltip = !this.show_tooltip;
}
}
})</script>
尝试一下 »
订单列表实例
订单列表
创建一个订单列表,并计算总价:
<form id="main" v-cloak>
<h1>Services</h1>
<ul>
<li v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{ 'active': service.active}">
{{service.name}} <span>{{service.price | currency}}</span>
</li>
</ul>
<div class="total">
Total: <span>{{total() | currency}}</span>
</div>
</form><script>
// 自定义过滤器 "currency"
Vue.filter('currency', function (value) {
return '$' + value.toFixed(2);
});
var demo = new Vue({
el: '#main',
data: {
// 定义模型属性
// 视图将循环输出数组的数据
services: [
{
name: 'Web Development',
price: 300,
active:true
},{
name: 'Design',
price: 400,
active:false
},{
name: 'Integration',
price: 250,
active:false
},{
name: 'Training',
price: 220,
active:false
}
]
},
methods: {
toggleActive: function(s){
s.active = !s.active;
},
total: function(){
var total = 0;
this.services.forEach(function(s){
if (s.active){
total+= s.price;
}
});
return total;
}
}
});
阜阳网页设计-高端网站设计公司