初识Vue练习,初识vue

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
   <p>{{message}}</p>
   <div v-text="name"></div>
   <div v-html="name"></div>
   <div v-text="num1+num2"></div>
    <div>{{num1+num2}}</div>
    <div>{{temp?name:name2}}</div>
    <div v-if="nb">
        大人们往往会因为小孩子们崇拜拾荒者、邮差以及起重机司机而感到担忧,但现在看来,比起我们成年人所崇拜的那些好莱坞大粪坑里的蛆,孩子们的理想似乎要崇高的多。
    </div>
    <div v-else="nb">
        半夜凉飕飕:道路无差别杀人事件,奇怪的死法
    </div>
    <div v-show="kaclus">
        猫会降低婴幼儿哮喘病的概率
    </div>
</div>
</body>
<script>
  var vm =new Vue({
        el:"#app",
        data:{
            message:"hello Vue",
            name:"morgana",
            num1:1000,
            num2:10,
            temp:false,
            name2:"katherine",
            nb:false,
            kaclus:false

        }
    })
//    setTimeout(function () {
//        vm.name="hahaha"
//    },5000)
</script>
</html>

  

html lang=”en”head meta
charset=”UTF-8″ titleTitle/title script src=”vue.js”/script/headbodydiv
id=”app” p{{message}}/p div v-text=”name”/div div v-html…

一:vue基础
1.1.Vue是一套营造客户分界面包车型地铁渐进式框架
1.2.引入vue:<script
src=”;
1.3.值插入:
1.3.1:插入dom
dom:
<div id=”app”>
{{ message }}
</div>
vue:
var app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue!’
}
})
el:vue的成效域
data:vue的数据

第一篇:初识bootstrap,初识bootstrap

Bootstrap是一款当下可怜流行的前端框架,简单来说,正是html,css,javascript的工具集,大家得以用bootstrap搭建出简洁,清新的网站或软件分界面,有了bootstrap那么些利器后台开辟人士再也不要发愁前台分界面包车型地铁搭建了。Bootstrap是twitter的工程师在业余时间开采的,在最大最盛行的开源站点github上开源今后讯速成为该网址上更新最频仍的类型,大批量技术员踊跃为该项目进献代码,长期内涌现出一大波运用bootstrap搭建的网址。何以bootstrap发展进度会那样惊人呢?那至关首要得益于bootstrap的非凡性格:

活动设备优先将对准移动的特征放在了第几个人

浏览器扶助:全数的主流浏览器都援助 Bootstrap

轻松上手:只要您有所 HTML 和 CSS 的基础知识,您就能够开首上学
Bootstrap

响应式设计:Bootstrap 的响应式 CSS
能够自适应于台式机、三星GALAXY Tab和手提式有线电话机。

它包罗了功效庞大的松开组件,易于定制

 

上面大家来看用bootstrap搭建出来的最简便的多个页面。

 

<!DOCTYPE html>

<html lang=”zh-cn”>

  <head>

    <meta charset=”utf-8″>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    <meta name=”viewport” content=”width=device-width,
initial-scale=1″>

    <title>Bootstrap 101 Template</title>

 

    <!– Bootstrap –>

    <link href=”css/bootstrap.min.css” rel=”stylesheet”>

 

    <!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and
media queries –>

    <!– WARNING: Respond.js doesn’t work if you view the page via
file:// –>

    <!–[if lt IE 9]>

      <script
src=”;

      <script
src=”;

    <![endif]–>

  </head>

<body>

 

<div class=”container”>
  <div class=”jumbotron”>
    <h1>作者的率先个 Bootstrap 页面</h1>
    <p>重新恢复设置窗口大小,查看响应式效果!</p>
  </div>
  <div class=”row”>
    <div class=”col-sm-4″>
      <h3>Column 1</h3>
      <p>学的不可是本领,更是希望!</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的百折不挠!</p>
    </div>
    <div class=”col-sm-4″>
      <h3>Column 2</h3>
      <p>学的不仅是技能,更是但愿!</p>
      <p>再牛逼的指望,也抵不住你傻逼似的持之以恒!</p>
    </div>
    <div class=”col-sm-4″>
      <h3>Column 3</h3>
      <p>学的不只是手艺,更是期望!</p>
      <p>再牛逼的希望,也抵不住你傻逼似的坚贞不屈!</p>
    </div>
  </div>
</div>

</body>

</html>

Bootstrap是一款当下异常红的前端框架,简来讲之,便是html,css,javascript的工具集,大家能够用bootstrap搭建…

Vue.js 简介

1.3.2.插入属性
dom:
<div id=”app-2″>
<span v-bind:title=”message”>
鼠标悬停几秒钟查看此处动态绑定的提醒消息!
</span>
</div>
vue:
var app2 = new Vue({
el: ‘#app-2’,
data: {
message: ‘页面加载于 ‘ + new Date()
}
})
1.3.2尺度绑定:
dom:
<div id=”app-3″>
<p v-if=”seen”>以往你看来自家了</p>
</div>
vue:
var app3 = new Vue({
el: ‘#app-3’,
data: {
seen: true
}
})
if指令:借使为true,则所绑定的因素加载,假诺为false,所绑定的要素卸载
1.3.3巡回绑定:
dom:
<div id=”app-4″>
<ol>
<li v-for=”todo in todos”>
{{ todo.text }}
</li>
</ol>
</div>
vue:
var app4 = new Vue({
el: ‘#app-4’,
data: {
todos: [
{ text: ‘学习 JavaScript’ },
{ text: ‘学习 Vue’ },
{ text: ‘整个牛项目’ }
]
}
})
1.3.4事件监听:
dom:
<div id=”app-5″>
<p>{{ message }}</p>
<button v-on:click=”reverseMessage”>转败为胜信息</button>
</div>
vue:
var app5 = new Vue({
el: ‘#app-5’,
data: {
message: ‘Hello Vue.js!’
},
methods: {
reverseMessage: function () {
this.message = this.message.split(”).reverse().join(”)
}
}
})
1.3.5:表单控件双向绑定
dom:
<div id=”app-6″>
<p>{{ message }}</p>
<input v-model=”message”>
</div>

证实及下载

Vue.js使用文书档案已经写的很齐全和详细了,通过以下地点能够查看:

vue.js倘若当成多少个库来行使,能够透过上面地址下载:

admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注