(原创)vue 学习笔记

最新推荐文章于 2024-07-24 10:40:52 发布

weixin_33933118

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量130

点赞数

文章标签：前端 python javascript ViewUI

原文链接：https://segmentfault.com/a/1190000015331615

版权

开篇语

我最近学习了js,取得进步,现在学习vue.js.
建议新手学习,请不要用npm的方式(vue-cli,vue脚手架),太复杂了. 请直接下载vue.js文件本地引入,就上手学习吧
参照菜鸟教程网站的vue.js教程http://www.runoob.com/vue2/vu...
从基础开始理解和上手,请看我写的中文注释,帮助理解

一些建议

直接把菜鸟教程的例子复制到自己的代码编辑器里看更好

菜鸟教程的好处我觉得之一是其有很多实例子,那么就应该拿例子复制回来本地自己的编辑器看.

因为菜鸟的例子左边代码,右边视图.就很小了,不好审视.

要打开浏览器控制台(比如我们推荐用谷歌浏览器chrome在浏览器按f12就可以打开控制台),直观的看到js和dom层,比看到界面更重要的是看到dom层的实际操作变化

一个简单的vue.js例子

<body>
 <h2>vue</h2>
  <div id="myapp">
   <p title="哈哈">学习vue很舒服</p> 
   <p>{{ message }}</p> <p>{{ mz }}</p> 
   </div> 
   <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> 
   <script type="text/javascript"> 
   var myapp = new Vue( //新建一个Vue 实例并赋值给变量'myapp',这时变量myapp就是这个vue实例 
   { 
       el:'#myapp',
       data:{ message:'hello Vue',  //myapp.message = 'hello Vue' 
       mz:'小伟33'  //myapp.mz = '小伟33' } } 
   ); 
   </script> 
   </body>

vue.js一个简单例子的基础说明系列-[第1个例子]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue一个简单例子的基础说明</title>
</head>
<body>
<div id="vue_det">
<!--  {{ }} 用于输出对象属性和函数返回值。  -->
<h3>site : {{site}}</h3>
<h3>url : {{url}}</h3>
<h3>alexa : {{alexa}}</h3>
<h3>{{details()}}</h3>
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',//el 参数，它是 DOM 元素中的 id,这意味着我们在该div里面作业,外面不受影响,不会影响外面
data: {//data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
site: "菜鸟教程",//这是一个属性site,其值是字符串"菜鸟教程"
url: "www.runoob.com",//同上
alexa: "10000"//这是一个属性alexa,其值是字符串"10000"
},
methods: {//methods 用于定义的函数，可以通过 return 来返回函数值。
details: function() {
return this.site + " - 学的不仅是技术，更是梦想！";
}
}
})
</script>
</body>
</html>

vue.js一个简单例子的基础说明系列-[第2个例子]---实例属性与方法,它们都有前缀 $

参照菜鸟教程网站的vue.js教程http://www.runoob.com/vue2/vu...

请看我写在代码里的注释

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js一个简单例子的基础说明系列-[第2个例子]</title>
</head>
<body>
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>Alexa : {{alexa}}</h1>
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 我们的数据对象
//除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}//定义一个js变量.即js属性
var xm = '小明';//定义一个js变量.即js属性
var vm = new Vue({
el: '#vue_det',//定义一个vue属性el,要使用vm.$el才能访问
data: data//定义一个vue属性data,要使用vm.$data才能访问
})
//       我们在浏览器控制台访问上面的那些变量和属性,直接通过.的方式
//        document的子是vm,vm的子是el和data,document.vm能访问vm,而vm.el这样写是
                                    //访问不到vm的,要这样写vm.$el才能访问,因为el是Vue实例的直接子变量
//       data  ->{__ob__: wr}   //是对象
// xm   ->'小明'
// el   ->VM113:1 Uncaught ReferenceError: el is not defined    //这样是访问不了的,因为el不是js的全局变量/属性
// vm.el   ->undefined    //这样也不行,要写成vm.$el才对
//       vm.$el   -><div id="vue-det">...</div>    //这样才是访问vue的
</script>
</body>
</html>

vue.js一个简单例子的基础说明系列-[第3个例子]-----vue如何模板语法渲染数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue.js一个简单例子的基础说明系列-[第1个例子]----vue如何模板语法渲染数据</title>
</head>
<body>
<div id="app">
<p>{{message2}}</p>  <!--使用 {{...}}（双大括号）的方式把属性的值渲染到html里-->
<div v-html="message1"></div>  <!--使用 v-html 指令来把 html 代码 渲染到html里-->
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script>
new Vue({
el: '#app',
data: {
message1: '<h1>菜鸟教程</h1>',
message2: 'ok,i can do it'
}
})
</script>
</body>
</html>

vue.js一个简单例子的基础说明系列-[第4个例子]-----这个例子.我还是不明白这个例子.我还是不明白

它是怎么vue去改变dom层

在浏览器控制台可以看到操作是它的dom层的变化

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class1 {
background: #444;
color: #eee;
}
</style>
<body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<div id="app">
<label for="r1">修改颜色</label>
<input type="checkbox" v-model="class1" id="r1">
<br><br>
<div v-bind:class="{'class1': class1}">
directiva v-bind:class
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
class1: false
}
});
</script>
</body>
</html>

vue 的v-bind,bind意思:绑定

vue 的v-bind,bind意思:绑定,v-bind就是在dom和js层进行数据绑定.就是可以讲js的数据变量什么的绑定到dom层的属性,让属性的值是js数据.这样,就能使得改变数据于是就改变了dom的属性

vue学习笔记-vue双向数据绑定- vue双向数据绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue双向数据绑定</title>
</head>
<body>
<div id="app">
<div>
<input v-model="parentMsg"/><!--意思是用户的所输入即更新到数据层里的parentMsg作为数据的值-->
<br>
<p>{{parentMsg}}</p>
</div>
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script>
// 创建根实例
new Vue({
el: '#app',
data: {
parentMsg: '这世界很大,天空很蓝'
}
})
</script>
</body>
</html>

vue npm 搭建项目流程及备忘及不踩坑

首先我新建个"abc"文件夹,cmd到abc目录下.

然后,初始化一个vue项目 vue init webpack mydemo1 (vue init simple 是简单版,webpack是普通版,一般选择使用webpack版),然后它就开始新建一个名叫作mydemo1的项目,问一些问题如下,除了几个要注意,其他的就按回车默认就行,要注意的几个如下:

Use ESLint to lint your code? (Y/n)

要使用严格的es6语法吗?不用,因为严格的话,写错一点代码都不允许,太麻烦.按n选no,再回车

Set up unit tests No ?(Y/n)

是测试工具,这个也选no就行.

Setup e2e tests with Nightwatch?

也是测试工具,这个也选no就行.

npm install 表示我要根据package.json文件清单来从node云端下载文件放到生成的node modules文件夹.这要下载很多东西,所以建议cnpm install

------------------------------------------分割-----------------------------------------

vue学习笔记-vue模板语法<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>vue模板语法</title>
</head>
<body>
<div id="app">
<div v-text="msg"></div><!--在div中以test的方式输出数据msg-->
<div v-html="msg2"></div><!--在div中输出以html的方式数据msg-->
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script>
// 创建根实例
new Vue({
el: '#app',
data: {
msg: '这世界很大,天空很蓝',
msg2: '<h2>这世界很大,天空很蓝</h2>'
}
})
</script>
</body>
</html>

vue + Django 一个项目涉及的 vue 技能清单

"Python前后端分离开发Vue+Django REST framework实战难度中级" 的知识技能清单已经罗列完了,它是偏后端的,所以前端的知识技能讲的不太多.
我打算现在继续再分析一个vue前端的项目,名字"慕课网 Vue2.5开发去哪儿网App 从零基础入门到实战项目",罗列它的知识技能清单.

vue项目技能清单之_vue2.0开发去哪儿网

来自慕课网教程"Vue2.5开发去哪儿网App 从零基础入门到实战项目"