update
This commit is contained in:
朱毅骏
parent
91a68660bf
commit
d62e17af6f
14
.gitignore
vendored
Normal file
14
.gitignore
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
/dist/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
51
base/axios.html
Normal file
51
base/axios.html
Normal file
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
|
||||
<title>Axios</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div>名称:{{info.name}}</div>
|
||||
<div>url:{{info.url}}</div>
|
||||
<div>
|
||||
地址:{{info.address.country}} --->
|
||||
{{info.address.city}}-->{{info.address.street}}
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li v-for="link in links">
|
||||
{{info.links.name}}---->{{info.links.url}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var vue = new Vue({
|
||||
// <!-- el , element缩写 ,挂载元素-->
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
info: {
|
||||
name: "",
|
||||
url: "",
|
||||
address: {
|
||||
country: "",
|
||||
city: "",
|
||||
street: "",
|
||||
},
|
||||
links: [{ name: "" }, { url: "" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
axios.get("data.json").then((response) => (this.info = response.data));
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
25
base/data.json
Normal file
25
base/data.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "百度",
|
||||
"url": "http://www.baidu.com",
|
||||
"page": 66,
|
||||
"isNonProfit": true,
|
||||
"address": {
|
||||
"street": "海定区",
|
||||
"city": "北京市",
|
||||
"country": "中国"
|
||||
},
|
||||
"links": [
|
||||
{
|
||||
"name": "Google",
|
||||
"url": "http://www.google.com"
|
||||
},
|
||||
{
|
||||
"name": "Baidu",
|
||||
"url": "http://www.baidu.com"
|
||||
},
|
||||
{
|
||||
"name": "Sougou",
|
||||
"url": "http://www.sougou.com"
|
||||
}
|
||||
]
|
||||
}
|
||||
27
base/else-if.html
Normal file
27
base/else-if.html
Normal file
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
<title>else-if判断</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div v-if="type==='A'">A</div>
|
||||
<div v-else-if="type==='B'">B</div>
|
||||
<div v-else-if="type==='C'">C</div>
|
||||
<div v-else>Not A/B/C</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var vue = new Vue({
|
||||
// <!-- el , element缩写 ,挂载元素-->
|
||||
el: "#app",
|
||||
data: {
|
||||
type: "A",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
26
base/for.html
Normal file
26
base/for.html
Normal file
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
<title>列表渲染</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<ul>
|
||||
<li v-for="item in items">{{item.message}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var vue = new Vue({
|
||||
// <!-- el , element缩写 ,挂载元素-->
|
||||
el: "#app",
|
||||
data: {
|
||||
items: [{ message: "Foo" }, { message: "Bar" }],
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
26
base/if.html
Normal file
26
base/if.html
Normal file
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
<title>if判断</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<h1 v-if="awesome">Vue is awesome!</h1>
|
||||
<h1 v-else>Oh no !</h1>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var vue = new Vue({
|
||||
// <!-- el , element缩写 ,挂载元素-->
|
||||
el: "#app",
|
||||
data: {
|
||||
message: "Hello Vue!",
|
||||
awesome: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
37
base/on.html
Normal file
37
base/on.html
Normal file
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
<title>事件处理</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<button v-on:click="greet">Greet</button>
|
||||
<!-- @是v-on的一个缩写 -->
|
||||
<button @click="greet">简写监听事件</button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var vue = new Vue({
|
||||
// <!-- el , element缩写 ,挂载元素-->
|
||||
el: "#app",
|
||||
data: {
|
||||
name: "Vue.js",
|
||||
},
|
||||
//函数
|
||||
methods: {
|
||||
greet: function (event) {
|
||||
//this指代vue实例
|
||||
alert("Hello" + this.name);
|
||||
//event原生DOM事件
|
||||
if (event) {
|
||||
alert(event.target.tagName);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
62
base/声明式渲染.html
Normal file
62
base/声明式渲染.html
Normal file
@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
{{ message }}
|
||||
</div>
|
||||
<div id="app-2">
|
||||
<span v-bind:title="message">
|
||||
鼠标悬停几秒钟查看此处动态绑定的提示信息！
|
||||
</span>
|
||||
</div>
|
||||
<div id="app-3">
|
||||
<p v-if="seen">现在你看到我了</p>
|
||||
</div>
|
||||
<div id="app-4">
|
||||
<ol>
|
||||
<li v-for="todo in todos">
|
||||
{{ todo.text }}
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
message: 'Hello Vue!'
|
||||
}
|
||||
})
|
||||
//鼠标悬停几秒钟查看此处动态绑定的提示信息！
|
||||
var app2 = new Vue({
|
||||
el: '#app-2',
|
||||
data: {
|
||||
message: '页面加载于 ' + new Date().toLocaleString()
|
||||
}
|
||||
})
|
||||
//继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。
|
||||
var app3 = new Vue({
|
||||
el: '#app-3',
|
||||
data: {
|
||||
seen: true
|
||||
}
|
||||
})
|
||||
//在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
|
||||
var app4 = new Vue({
|
||||
el: '#app-4',
|
||||
data: {
|
||||
todos: [
|
||||
{ text: '学习 JavaScript' },
|
||||
{ text: '学习 Vue' },
|
||||
{ text: '整个牛项目' }
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
44
base/处理用户输入.html
Normal file
44
base/处理用户输入.html
Normal file
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!--v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法-->
|
||||
<div id="app-5">
|
||||
<p>{{ message }}</p>
|
||||
<button v-on:click="reverseMessage">反转消息</button>
|
||||
<div>
|
||||
<p>{{ message }}</p>
|
||||
<button v-on:click="reverseMessage">反转消息</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--双向绑定-->
|
||||
<div id="app-6">
|
||||
<p>{{ message }}</p>
|
||||
<input v-model="message">
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
var app5 = new Vue({
|
||||
el: '#app-5',
|
||||
data: {
|
||||
message: 'Hello Vue.js!'
|
||||
},
|
||||
methods: {
|
||||
reverseMessage: function () {
|
||||
this.message = this.message.split('').reverse().join('')
|
||||
}
|
||||
}
|
||||
})
|
||||
var app6 = new Vue({
|
||||
el: '#app-6',
|
||||
data: {
|
||||
message: 'Hello Vue!'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
41
base/条件与循环.html
Normal file
41
base/条件与循环.html
Normal file
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app-3">
|
||||
<p v-if="seen">现在你看到我了</p>
|
||||
</div>
|
||||
<div id="app-4">
|
||||
<ol>
|
||||
<li v-for="todo in todos">
|
||||
{{ todo.text }}
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
//继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。
|
||||
var app3 = new Vue({
|
||||
el: '#app-3',
|
||||
data: {
|
||||
seen: true
|
||||
}
|
||||
})
|
||||
//在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
|
||||
var app4 = new Vue({
|
||||
el: '#app-4',
|
||||
data: {
|
||||
todos: [
|
||||
{ text: '学习 JavaScript' },
|
||||
{ text: '学习 Vue' },
|
||||
{ text: '整个牛项目' }
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
46
base/组件化应用构建.html
Normal file
46
base/组件化应用构建.html
Normal file
@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app-7">
|
||||
<!-- 组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
|
||||
仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：-->
|
||||
<!-- 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单-->
|
||||
<ol>
|
||||
<!--
|
||||
现在我们为每个 todo-item 提供 todo 对象
|
||||
todo 对象是变量，即其内容可以是动态的。
|
||||
我们也需要为每个组件提供一个“key”，稍后再
|
||||
作详细解释。
|
||||
-->
|
||||
<todo-item
|
||||
v-for="item in groceryList"
|
||||
v-bind:todo="item"
|
||||
v-bind:key="item.id"
|
||||
></todo-item>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
Vue.component('todo-item', {
|
||||
props: ['todo'],
|
||||
template: '<li>{{ todo.text }}</li>'
|
||||
})
|
||||
|
||||
var app7 = new Vue({
|
||||
el: '#app-7',
|
||||
data: {
|
||||
groceryList: [
|
||||
{ id: 0, text: '蔬菜' },
|
||||
{ id: 1, text: '奶酪' },
|
||||
{ id: 2, text: '随便其它什么人吃的东西' }
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user