作为一个年轻的老程序员，不知怎么的突然间火了好多的前端框架，以前写个页面用下js或者jquery足够了，可能还需要调用一些数据用ajax也就可以了，现在的新人们再说我们应该组件化开发，应该使用打包工具(以前我以为就是用android的webview控件打包做好的网站)。发几句牢骚话，既然能火起来肯定有它的原因，我们这次就先看
进入到 https://cn.vuejs.org/ 我就看到有个描述叫：渐进式JavaScript框架，瞬间就安心了原来还是js框架，那么渐进式又是个什么鬼？ 能够让每一位用户使用，无论用户使用什么浏览器，因为它是始终以渐进增强为原则，主张最少。好吧还不是特别懂，我想直接看代码。
第一步：安装
哎呦~！还需要安装好高端的样子
原来vue在使用的时候有两种方式一种像我们引入jquery一样直接使用<script>标签进行引入然后书写，
<head>
<script src="vue.min.js"></script>
</head>
另一种就是安装一个node.js然后使用npm命令进行安装下载。
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
注意：在window环境下那个 $符号不需要
第二步：进行使用
我们用最简单方式来练习以下，用<script>标签引入vue.js ，然后我们给vue new一个实例
var vm = new Vue({
// 选项
})
数据写在哪里？
var vm=new Vue({
data: {
newTodoText: '' ,
visitCount: 0 ,
hideCompletedTodos: false ,
todos: [],
error: null
进入到 https://cn.vuejs.org/ 我就看到有个描述叫：渐进式JavaScript框架，瞬间就安心了原来还是js框架，那么渐进式又是个什么鬼？ 能够让每一位用户使用，无论用户使用什么浏览器，因为它是始终以渐进增强为原则，主张最少。好吧还不是特别懂，我想直接看代码。
第一步：安装
哎呦~！还需要安装好高端的样子
原来vue在使用的时候有两种方式一种像我们引入jquery一样直接使用<script>标签进行引入然后书写，
<head>
<script src="vue.min.js"></script>
</head>
另一种就是安装一个node.js然后使用npm命令进行安装下载。
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
注意：在window环境下那个 $符号不需要
第二步：进行使用
我们用最简单方式来练习以下，用<script>标签引入vue.js ，然后我们给vue new一个实例
var vm = new Vue({
// 选项
})
数据写在哪里？
var vm=new Vue({
data: {
newTodoText: '' ,
visitCount: 0 ,
hideCompletedTodos: false ,
todos: [],
error: null
}})
直接贴一串代码
<!doctype html>
<html>
<head>
<!--引入vue-->
<script src="vue.min.js"></script>
</head>
<body>
<!--定义应用程序-->
<div id="app">
<!--{{}}进行数据绑定-->
{{name}}
</div>
</body>
<script>
<!--实例化vue-->
var vm=new Vue({
el:"#app",
data:{
name:'案例'
}
})
</script>
</html>
扫一扫
154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
