写一个测试的Vuejs 构成的html
前言
需要学点前后端，想做个网页上的小工具…于是就开始了。
新建一个index.html
由于Vuejs官网不建议开始就使用 Vue-cli的脚手架…转用其他方法…
使用 sync-my-code(某大佬写的代码同步工具)
安利: https://www.npmjs.com/package/sync-my-code
#在本地生成.syncrc.json文件(更新后添加的新功能)
sync-my-code -c ./
#在本地修改.syncrc.json文件中的目标路径和密码账号后
sync-my-code -w ./使用http-server 开启服务端
安利: https://www.npmjs.com/package/http-server
#进入服务器同步目录后
http-server aid ./访问开放的端口，即可查看html的页面,改了代码只需要在编辑器这边保存，然后刷新页面，方便快捷。
引用bootstrap
- 使用bootstrap 初学者模板导入
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>需要学习更多bootstrap知识
引用Vuejs 并塞了一堆示例
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!-- 引用vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>to-do-list</title>
</head>
<body>
<h1>Hello, world!</h1>
<div id="app">
<p>
{{ message }}
</p>
<!-- v-if 判断是否显示-->
<p v-if="visable">
<span v-bind:title="message2">
鼠标悬停一会就能看到数据了
</span>
</p>
<!-- v-for 循环显示-->
<p v-if="visable" >
<li v-for="todo in groceryList">
{{todo.text}}
</li>
</p>
<p v-if="visable" >
{{message}}
<button v-on:click="reverseMsg" type="button" class="btn btn-outline-dark btn-lg" >Reverse</button>
</p>
<!-- 使用v-model 表单输入和应用状态双向绑定-->
<p>
{{message}}
<input v-model="message">
</p>
<!-- 组件和模板 -->
<p>
<ol>
<todo-item
v-for = "item in groceryList"
v-bind:todo = "item"
v-bind:key = "item.id">
</todo-item>
</ol>
</p>
</div>
<script>
///组件和模板
Vue.component('todo-item',{
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
///根容器
var app = new Vue({
el: '#app',
data: {
message: 'Now we use vue.js!',
visable: true,
message2: '页面加载于' + new Date().toLocaleString(),
groceryList: [
{ id: '0' , text: '学习linux入门编程' },
{ id: '1' , text: '学习cmake和gcc的基本用法' },
{ id: '2' , text: '打字练习' }
]
},
methods: {
reverseMsg: function(){
this.message = this.message.split(' ').reverse().join(' ')
}
}
})
///在外部添加数据
app.groceryList.push({ id: '3' , text: "新增项目！"})
///在外部新增变量
app.x = "new data"
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>参考
Vuejs :
https://cn.vuejs.org/v2/guide/index.html
Bootstrap入门:
https://v4.bootcss.com/docs/4.0/getting-started/introduction/
Status
持续变强中…