vue
-
vue完整版：vue.js
-
vue非完整版：vue.runtime.js
vue完整版使用实例（从HTML得到视图）
-
从CDN引用
vue.js或vue.min.js即可 -
也可以通过
import引用vue.js或者vue.min.js(详情看cn.vuejs.org/ ,把alias去掉即可）
new Vue({
el: "#app", //直接从html中获取元素
data: {
n: 0,
},
});
template(vue完整版)
new Vue({
el: "#app",
template: `
<div>{{n}}</div>
`,
data: {
n: 0,
},
});
- 可以写在HTML里面或者写在JS里面都可以
vue非完整版使用实例 （用JS构建视图）
-
从CDN引用
vue.runtime.js -
这种方法很不方便，但实际上是对的
render
- 意义在于更加的独立
new Vue({
el: "#app",
//template: `
//<div>{{n}}</div>
//`,
render(createElement) {
const h = createElement;
return h("div", [this.n, h("button", { on: { click: this.add } }, "+1")]);
},
data: {
n: 0,
},
methods: {
add() {
this.n += 1;
},
},
});
Vue单文件组件
Demo.vue
<template> //视图
<div class="red">
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script> //除了视图以外的其他内容
export default {
data(){ //只支持函数
return {
n: 0
}
},
methods:{
add(){
this.n +=1
}
}
}
</script>
<style scoped>
.red{
color: red;
}
</style>
src/main.js
import Vue from "vue"; //不完整版vue
import Demo from "./Demo.vue";
new Vue({
el: "#app",
render(h) { //渲染，自动翻译.vue 中的文件内容
return h(Demo);
},
});
SEO 基本原理
- SEO 即搜索引擎优化，可以理解引擎就是不停的curl，搜索引擎根据curl结果猜测页面的内容，如果页面都是用JS创建的div，只能看见一个空的APP标签
<head>
<title>vue-demo-1</title>
<meta name="keyword" content="xxx" />
//xxx是关键词
<meta name="description" value="描述" />
</head>
<body>
<div id="app">
<h1></h1>
<a href="地址">详情</a>
</div>
</body>
深入理解两种区别
用 codesandbox.io 写 Vue代码
- 进入codesandbox.io，点击Create Sandbox， 选择vue，即可进行写代码，如果想要保存到本地，可以选择Export to ZIP ，然后进行解压即可
