-------------------------------------------------------------------VUE-----------------------------------------------------------------------
1：VUE是一个构建用户界面的JS框架,是一套用于构建用户界面的渐进式框架。
2:与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
3:Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
4:另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
var app = new Vue({ -----------------------------------声明
el:"#app01"-------------------------------------------绑定标签
data:{------------------------------------------------数据
}
methods：function(){-----------------------------------事件
}
computed：{--------------------------------------------计算属性
}
})
Vue.component(‘组件名‘{-------------------------------------组件
data:function(){
return " "------------------------------------------一定要有返回值
}
})
双向绑定：v-model指令实现,它能轻松实现表单输入和应用状态之间的双向绑定.
变量提升：
ES6(ECMAScript):-----------------------------es:EMCAScript 6 (es2015)-----------Emca:国际标准组织
ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。日常场合，这两个词是可以互换的。
1:常量和变量-----------------const，let，var
let---------------------------------局部生效,定义一个块级作用域的变量，
需要先定义再使用；(不存在变量提升),不能重复定义，
let声明的变量只在它所在的代码块有效。
const-------------------------------常量，只读。
var---------------------------------全局生效,有变量提升现象(先使用，后定义)，重复定义会被覆盖。
例一：
{
const c = "hello 个屁！";
let a="wsl";
var b="Hello";
console.log(a);
console.log(b);
console.log(c)
}
例二：
let b = "不回";
if (10>9){
let b = "回家过年！";
console.log(b)
}
例三：
{
let d = 500;
d = 1000;
console.log(d)
}
例四：--------计数器i只在for循环体内有效，在循环体外引用就会报错。
for (let i = 0;i<10;i++){
console.log(i);
}
例五：--------变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。如果使用let，声明的变量仅在块级作用域内有效，最后输出的是6。
{
var a = [];
for (var i=0;i<10;i++){
a[i] = function(){
console.log(i);
};
}
a[6]();
}
---------------------------------
{
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
}
例六：--------var，定义多次覆盖现象‘
const obj = {
name: "谢小二",
age: 22
}
var obj2 = obj;
obj2.age = 90
console.log(obj.age);
js的数据类型：-----------字符串(string), 数组(array), 数字(number), 未定义的(undefined), 布尔(boolean), object, null
基本数据类型：-----------字符串(string), 数字(number), 布尔(boolean), 布尔(boolean), 布尔(boolean)
引用类型：---------------数组(array) object
2:模板字符串-----------------通过反引号来使用，字符串当中可以使用变量，可以当作普通字符串来处理，可以使用多行字符串
例一：------------------------------
let name = `悟空`;
console.log(`谁的名字叫${name}`);
例二：----------------------------- document.getElementById("list_1").innerHTML--------------插入标签。
<ul id="list_1">
</ul>
<script>
let name = `悟空`;
console.log(`谁的名字叫${name}`);
document.getElementById("list_1").innerHTML = `
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
`
</script>
3:解构变量-------------------数组解构赋值：-------------------------把数据元素的值依次地赋给变量。
例一：
{
let arr = [10,20];
let a = arr[0];
let b = arr[1];
console.log(a);
console.log(b)
}
例二：
{
let [a,b,[c,[d]]] = [100,200,[300,[4000]],];
console.log(a);
console.log(b);
console.log(c);
console.log(d) ;
}
例三：
{
let obj = {
"name":"悟空",
"age":20,
};
let{name,age} = obj
console.log(name)
console.log(age)
}
例四：
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = [‘a‘];
x // "a"
y // undefined
z // []
4:对象的扩展-----------------允许直接写入变量和函数，作为对象的属性和方法,(对象当中的属性可以简写,对象当中的方法也可以简写)
例一：
{
let username = "悟空";
let obj = {
username,
fun(){
alert(‘过年回家！‘)
}
};
console.log(username,obj);
console.log(obj.username);
obj.fun()
}
例二：------------------------------属性名为变量名, 属性值为变量的值
{
function f(x, y) {
return {x, y};
}
// 等同于
function f(x, y) {
return {x: x, y: y};
}
f(1, 2) // Object {x: 1, y: 2
}
例三：
var birth = ‘2000/01/01‘;
var Person = {
name: ‘张三‘,
//等同于birth: birth
birth,
// 等同于hello: function ()...
hello() { console.log(‘我的名字是‘, this.name); }
};
5:函数的扩展-----------------在ES6之前，不能直接为函数的参数指定默认值，只能采用变通的方法。---可以给函数默认参数，剩余参数：function fun(a,...b ){}fun(11,22,33)则：b = [22,33]
例一：------------------------------给函数指定默认参数
function fun(x=100){
alert(x);
}
fun()
例二：------------------------------将剩余参数打包(...xx),相当于python的*args和**kwargs
function fun2(x=500,...y){
console.log(x);
console.log(y);
}
fun2(x=100,y=40,z=500)
}
6:数组的扩展
(1):判断数组当中是否存在某个数值
例一：
{
var arr = [100,200,300,400,500]
arr.forEach(function (value,index) {
// console.log(value)
// console.log(index)
});
var arr2 = arr.map(function(value,index){
return value+1
});
console.log(arr.indexOf(1000));
console.log(arr.includes(201))
}
// console.log(arr2)
(2):对数组的遍历--------------------forEach
例一:---------------------------对数组遍历
{
var arr = [100,200,300,400,500]
arr.forEach(function (value,index) {
console.log(value)
console.log(index)
})
}
例二：--------------------------对遍历后的数组，再进行处理。
{
var arr = [100,200,300,400,500]
arr.forEach(function (value,index) {
console.log(value)
console.log(index)
});
var arr2 = arr.map(function(value,index){
return value+1
})
}
console.log(arr2)
例三：--------------------------循环遍历
{
let arr3 = [11,22,33,44,55,66]
for (i in arr3){
console.log(i);
console.log(arr3[i])
}
(3):对数组的过滤--------------------filter
{
var arr = [10,20,30,40,50];
var arr4 = arr.filter(function (value,index) {
return value>20
});
console.log(arr4)
}
7：类的扩展。
7：箭头函数：
var f = a =>a
----------------------
var f = function(a){
return a;
}
f(1)
1：使用：
(1):引入-------------------------vue.js
<script src=vue.js></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
(2):展示html
<div id="app">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div>
(3)：建立vre对象
new Vue({
el: "#app", //表示在当前这个元素内开始使用VUE
data:{
msg: ""
}
})
2：声明形式渲染:-----------------------------Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统,{{}}， 里面可以放表达式
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: ‘#app‘,
data: {
message: ‘Hello Vue!‘
}
})
3:指令:--------------------------------------是带有V-前缀的特殊属性，通过属性来操作元素
1: v-text:----------------------------在元素当中插入值
<div id=‘add‘>
<p v-text="arr"></p>
</div>
<script>
new Vue({
el: "#add",
data: {
arr:"森纳那亚克",
}
})
</script>
2: v-html:----------------------------在元素不中不仅可以插入文本，还可以插入标签
<div id=‘a1‘>
<p v-text="crr"></p>
</div>
<script>
new Vue({
el: "#a1",
data: {
crr:‘<input type="button">‘,
}
})
</script>
3: v-if:------------------------------根据表达式的真假值来动态插入和移除元素,若状态为flase,将标签注释。
<div id="spp">
<p v-if="msg">aaaaa</p>
<p v-else>bbbbbbbbb</p>
</div>
<script>
new Vue({
el: "#spp",
data: {
arr:True,
}
})
</script>
4：v-show:----------------------------根据表达式的真假值来隐藏和显示元素
<div id="spp">
<p v-show="msg">认真学，刻苦练！</p>
</div>
<script>
new Vue({
el: "#spp",
data: {
msg:True,
}
})
</script>
5：v-for:-----------------------------根据变量的值来循环渲染元素
<div id="spp">
<ul>
<li v-for="(item,index) in msg">{{item}}:{{index}}</li>
</ul>
<ul>
<li v-for="(item,key,index) in obj">{{item}}:{{key}}:{{index}}</li>
</ul>
<ul>
<li v-for="item in arr">{{item.username}}{{item.age}}{{item.sex}}</li>
</ul>
</div>
<script>
new Vue({
el: "#spp",
data: {
msg: [‘星期一‘, ‘星期二‘, ‘星期三‘, ‘星期四‘, ‘星期五‘, ‘放假‘],
obj: {a: "老虎", b: "狮子", c: "猎豹", d: "大象"},
arr:[
{"username":"悟空"},
{"age":10000},
{"sex":"male"}
]
}
});
</script>
6: v-on:------------------------------监听元素事件，并执行相应的操作<!-- 完整语法 --><a v-on:click="doSomething">...</a><!-- 缩写 --><a @click="doSomething">...</a>
例1：
<div id="spp">
<ul>
<li v-for="item in aa">{{item}}</li>
</ul>
<input type="button" value="点我你试试" @click="show()">
</div>
<script>
new Vue({
el: "#spp",
data: {
aa:[11,22,33,44,55,66,77,88,99],
},
methods: {
show: function () {
this.aa.pop();
}
}
}
)
</script>
例2:
<div id="app4">
<p>{{masge}}</p>
<button v-on:click="dian">逆转消息</button>
</div>
<script>
var app4 = new Vue({
el:"#app4",
data:{
masge:"wang,shang,Long"
},
methods:{
dian:function () {
this.masge = this.masge.split(‘,‘).reverse().join(‘‘)
}
}
})
</script>
7: v-bind:----------------------------绑定元素的属性来执行相应的操作---完整语法<a v-bind:href="url">...</a> --缩写<a :href="url">...</a>
例1：跳转
<div id="spp">
<a :href="url">试试就试试</a>
</div>
<script>
new Vue({
el: "#spp",
data: {
url:"https://www.baidu.com/",
},
}
})
</script>
例2：悬浮提示信息-----------------将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
<div id="app_1">
<span v-bind:title="message">
鼠标悬停几秒查看此处动态绑定的提示信息！
</span>
</div>
<script>
var app1 = new Vue({
el:"#app_1",
data:{
message:‘页面加载与‘ + new Date().toLocaleString()
}
})
</script>
8: v-model:---------------------------实现了数据和视图的双向绑定：--把元素的值和数据相绑定，当输入内容时，数据同步发生变化，视图是---------数据的驱动当改变数据时，输入内容也会发生变化,数据是------视图的驱动
<div id="app">
<input type="text" v-model="msg">
<p>{{msg}}</p>
<input type="submit" value="变" @click="change">
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"挣钱！"
},
methods:{
change:function () {
this.msg="挣个屁！"
}
}
})
</script>
9: 取反-------------------------------!,通过不停改变状态，实现闪烁
div id="spp">
<p v-show="msg">认真学，刻苦练！</p>
</div>
<script>
var vm = new Vue({ //起个别名
el: "#spp", //表示使用uve
data: {
msg: true
}
});
window.setInterval(function () {
vm.msg = !vm.msg; //取反
}, 1000) //间隔秒数
</script>
10：自定义指令：----------------------directives：{指令名：{.......}}
<div id="app">
<input type="text" v-focus>
</div>
<script>
new Vue({
el:"#app",
data:{},
directives:{ //自定义指令
focus:{ //自定义指令的名字
inserted:function (tt) { //当绑定的元素显示时
tt.focus();
tt.style.backgroundColor="blue";
tt.style.color="#fff";
}
}
}
})
</script>
4:计算属性：----------------------------------computed，模板内的表达式非常便利用于简单运算的。放入太多的逻辑会让模板过重且难以维护。
-----------------------------------所以，对于任何复杂逻辑，你都应当使用计算属性。
计算属性：
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: ‘#example‘,
data: {
message: ‘Hello‘
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split(‘‘).reverse().join(‘‘)
}
}
计算属性缓存 vs 方法：-------------每当触发重新渲染时，调用方法将总会再次执行函数
两种方式的最终结果确实是完全相同的。
然而，不同的是计算属性是基于它们的依赖进行缓存的。
计算属性只有在它的相关依赖发生改变时才会重新求值。
这就意味着只要 message 还没有发生改变，
多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
例：
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split(‘‘).reverse().join(‘‘)
}
}
计算属性 vs 侦听属性：-------------watch
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。
当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——
特别是如果你之前使用过 AngularJS。
然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: ‘#demo‘,
data: {
firstName: ‘Foo‘,
lastName: ‘Bar‘,
fullName: ‘Foo Bar‘
},
watch: {
firstName: function (val) {
this.fullName = val + ‘ ‘ + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ‘ ‘ + val
}
}
})
上面代码是命令式且重复的。将它与计算属性的版本进行比较：
var vm = new Vue({
el: ‘#demo‘,
data: {
firstName: ‘Foo‘,
lastName: ‘Bar‘
},
computed: {
fullName: function () {
return this.firstName + ‘ ‘ + this.lastName
}
}
})
计算属性的setter-------------------计算属性+方法
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
例：
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ‘ ‘ + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(‘ ‘)
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
现在再运行 vm.fullName = ‘John Doe‘ 时，
setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
5:侦听器--------------------------------------watch,当需要在数据变化时执行异步或开销较大的操作时
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。
这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
例：
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: ‘#watch-example‘,
data: {
question: ‘‘,
answer: ‘I cannot give you an answer until you ask a question!‘
},
watch: {
// 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = ‘Waiting for you to stop typing...‘
this.debouncedGetAnswer()
}
},
created: function () {
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
// 请参考：https://lodash.com/docs#debounce
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf(‘?‘) === -1) {
this.answer = ‘Questions usually contain a question mark. ;-)‘
return
}
this.answer = ‘Thinking...‘
var vm = this
axios.get(‘https://yesno.wtf/api‘)
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = ‘Error! Could not reach the API. ‘ + error
})
}
}
})
</script>
6：组件化应用构建：--------------------------组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型。
组件基础：-------------------------------Vue.component(‘组件名‘,{data:function(){return{}},template:‘组件html‘})
1：在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：：：
Vue.component(‘todo-item‘, {-------------------------------定义名为 todo-item 的新组件
template: ‘<li>这是个待办项</li>‘
})
2：现在你可以用它构建另一个组件模板：
<ol>
<todo-item></todo-item>----------------------------------创建一个 todo-item 组件的实例
</ol>
3：我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个 prop：
Vue.component(‘todo-item‘, {-------------------------------todo-item 组件现在接受一个
props: [‘todo‘],-----------------------------------------"prop"，类似于一个自定义特性。这个 prop 名为 todo。
template: ‘<li>{{ todo.text }}</li>‘
})
4：现在，我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中：
模板：
<div id="app-7">
<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>
自定制组件：
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: ‘随便其它什么人吃的东西‘ }
]
}
})
Vue.component(‘组件名‘,{data:function(){return{}},template:‘组件html‘})-----------------创建组件
---------------------------使用组件---------------------------------------------
<div id="app">
<Vheader></Vheader>
<Vheader></Vheader>
</div>
---------------------------引用js------------------------------------------------
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
---------------------------组件的创建--------------------------------------------
Vue.component(‘Vheader‘,{-------------------------创建组件，组件名
data:function(){-------------------------------数据，一定是函数 必须要有返回值，必须要return 哪怕是空对象
return {
}
},
template:`<div class="header">------------------组件样式
<div class="w">
<div class="w-l">
<img src="./logo.png"/>
</div>
<div class="w-r">
<button>登录</button><button>注册</button>
</div>
</div>
</div>`
})
---------------------------Vue---------------------------------------------------
var app = new Vue({
el:‘#app‘,
data:{
},
computed:{
},
methods:{
}
})
7:vue解决跨域:--------------------------------axios
前端
1:下载--------------------------------npm install axios
2：main.js:
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import axios from ‘axios‘
//-------在vue的全局变量中设置了 $axios=axios,以后每个组件使用时：this.$axios------------------------
Vue.prototype.$axios = axios;
Vue.config.productionTip = false;
axios.defaults.headers[‘Content-Type‘] = ‘application/json‘
new Vue({
el: ‘#app‘,
router,
components: { App },
template: ‘<App/>‘
});
后端：
cors.py:
class MiddlewareMixin(object):
def __init__(self, get_response=None):
self.get_response = get_response
super(MiddlewareMixin, self).__init__()
def __call__(self, request):
response = None
if hasattr(self, ‘process_request‘):
response = self.process_request(request)
if not response:
response = self.get_response(request)
if hasattr(self, ‘process_response‘):
response = self.process_response(request, response)
return response
class CORSMiddleware(MiddlewareMixin):
def process_response(self,request,response):
# 添加响应头
# 允许你的域名来获取我的数据
response[‘Access-Control-Allow-Origin‘] = "*"
# 允许你携带Content-Type请求头
# response[‘Access-Control-Allow-Headers‘] = "Content-Type"
# 允许你发送DELETE,PUT
# response[‘Access-Control-Allow-Methods‘] = "DELETE,PUT"
return response
setting.py:
配置
MIDDLEWARE = [
‘django.middleware.security.SecurityMiddleware‘,
‘......‘
‘luffy.cors.CORSMiddleware‘,
]
外加配置版本设置
REST_FRAMEWORK = {
‘DEFAULT_RENDERER_CLASSES‘:[‘rest_framework.renderers.JSONRenderer‘,‘rest_framework.renderers.BrowsableAPIRenderer‘,],
‘DEFAULT_VERSIONING_CLASS‘:‘rest_framework.versioning.URLPathVersioning‘,
‘ALLOWED_VERSIONS‘:[‘v1‘,‘v2‘], # 允许的版本
‘VERSION_PARAM‘:‘version‘, # 参数
‘DEFAULT_VERSION‘:‘v1‘, # 默认版本
}
搭建脚手架：
vue-cli是vue.js的脚手架,用于自动生成vue.js工程模板的.
安装以及使用步骤：
安装。 npm install vue
全局安装----------------------------------------------------npm install vue-cli -g或者cnpm install vue-cli -g
查看是否安装成功--------------------------------------------vue -V(大写的V)
--------------------------------------------vue list
使用
生成项目名是wsw的模板-----------------------------------vue init webpack wsw
进入项目并安装依赖-------------cd wsw ------------------npm install
运行----------------------------------------------------npm run dev
组件的使用：
模块：
使用jQ:
1：安装-------------------------------------npm install jquery --save
2：webpack配置
(1):在项目根目录下的build目录下找到webpack.base.conf.js文件，
在开头使用以下代码引入webpack，因为该文件默认没有引用，
------var webpack = require(‘webpack‘)
(2)然后在module.exports中添加一段代码，
----------原有代码--------------------
resolve: {
extensions: [‘.js‘, ‘.vue‘, ‘.json‘],
alias: {
‘vue$‘: ‘vue/dist/vue.esm.js‘,
‘@‘: resolve(‘src‘)
}
},
**--------添加代码---------------------
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
})
],
---------原有代码----------------------
module: {
rules: [
......
]
}
(3)然后许多其他解决办法到此就说在main.js里导入就可以了，然而题主照着做了。
main.js里导入jQuery
import ‘jquery‘
在Vue组件里使用 $ or jQuery 写了操作dom的代码
接着启动项目
npm run dev
3:编译报错解决方法：
http://eslint.org/docs/rules/no-undef ‘$‘ is not defined or
http://eslint.org/docs/rules/no-undef ‘jQuery‘ is not defined
(1)eslint检查-----------------------------机智的朋友肯定想到跟eslint有关，
这时候需要做的下一步就是要修改根目录下.eslintrc.js文件了，
在改文件的module.exports中，为env添加一个键值对 jquery: true 就可以了，
也就是：
env: {
// 原有
browser: true,
// 添加
jquery: true
}
(2)npm run dev ，OK了，去组件里试一下吧，console.log($(‘选择器‘)) ，
你会发现成功使用jQuery获取到了DOM。
使用bootstarp:
Sublime Text设置高可亮：
1:下载，解压----------------https://github.com/vuejs/vue-syntax-highlight
2：打开---------------------进入sublime选择菜单项“Preferences---->Browse Packages
3：创建---------------------创建vue文件夹
4：拷入---------------------在Vue文件夹中，将vue-syntax-highlight-master压缩包解压后的所有文件考入。
5：载入---------------------按下快捷键“ctrl+shift+p”，在打开的packages输入框中输入vue，
选择“Set Syntax:Vue Component”进行加载。
6：重启Sublime
node.js-----------------------------------以运行js的服务平台，可以当做值一门后端语言，它的开发语言是js[
python---------------自己创建服务
php------------------apache
java-----------------tomcat
node.js--------------express
安装以及使用-----------------------------http://www.nodejs.en
特性：
1：非阻塞IO模型
2：事件驱动
运用场景：
高并发低业务
webpacck-----------------------------------是一个模块管理器
可以把ccs图片当做模块加载。
可以把文件进行压缩打包成一个js文件，减少html请求。
根据模块之间的关系进行分析，按需要加载。
可以安装一些插件，对插件进行打包处理。
安装以及使用：
npm install webpacck-g -------全局安装。
练习：
1：tag切换
<div id="mybox">
<ul>
<li>
<span v-on:click="qh(true)">二唯码登录</span>
</li>
<li>
<span v-on:click="qh(false)">邮箱登录</span>
</li>
</ul>
<div v-show="temp">
<img src="erma.jpg">
</div>
<div v-show="!temp">
<form action="http://mail.163.com" method="post">
<p><input type="email"></p>
<p><input type="password"></p>
<p><input type="submit" value="登录"></p>
</form>
</div>
</div>
<script>
new Vue({
el: "#mybox",
data: {
temp: true
},
methods: {
qh: function (t) {
this.temp = t
}
}
})
</script>
2：动态生成html
<div id="pa">
<ul>
<li><input type="checkbox">日韩</li>
<li><input type="checkbox">欧美</li>
<li><input type="checkbox">国产</li>
<li><input type="checkbox" v-on:click="create()">其他</li>
<li v-html="htmlstrs" v-show="af"></li>
</ul>
</div>
<script>
new Vue({
el:"#pa",
data:{
af:false,
htmlstrs:"<textarea></textarea>"
},
methods:{
create:function(){
this.af=!this.af
}
}
})
</script>
3:表格增删改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
ul li{
list-style: none;
}
.tipbox{
width: 200px;
height:200px;
border: 1px solid cornflowerblue;
position: absolute;
background-color: #aaaaaa;
top: 200px;
left: 600px;
}
</style>
</head>
<body>
<div id="app">
<div>
<input type="text" placeholder="姓名" v-model="username">
<input type="text" placeholder="年龄" v-model="age">
<input type="button" value="增加" @click="add">
</div>
<div>
<table cellpadding="0" border="1">
<tr v-for="(item,index) in arr">
<td>{{item.username}}</td>
<td>{{item.age}}</td>
<td>{{index}}</td>
<td><input type="button" value="删除" @click="del(index)"></td>
<td><input type="button" value="修改" @click="showBox(index)"></td>
</tr>
</table>
</div>
<div class="tipbox" v-show="isShow">
<p><input type="text" placeholder="姓名" v-model="m_username"></p>
<p><input type="text" placeholder="年龄" v-model="m_age"></p>
<p>
<input type="button" value="确定" @click="save()">
<input type="button" value="取消" @click="cancel()">
</p>
</div>
</div>
<script>
new Vue({
el: "#app", //表示在当前这个元素内开始使用VUE
data:{
username: "",
age: "",
arr: [],
isShow:false,
m_username: "",
m_age: "",
n: 0
},
methods: {
add: function () {
this.arr.push({username:this.username,age: this.age});
console.log(this.arr);
},
del: function (index) {
this.arr.splice(index,1);
},
showBox: function (index) {
this.isShow = true;
this.n = index;
this.m_username = this.arr[index].username;
this.m_age = this.arr[index].age;
},
cancel: function () {
this.isShow = false
},
save: function () {
this.arr[this.n].username = this.m_username;
this.arr[this.n].age = this.m_age;
this.isShow = false
}
}
})
</script>
</body>
</html>
4:计算属性
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: ‘#example‘,
data: {
message: ‘Hello‘
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split(‘‘).reverse().join(‘‘)
}
}
})
5:切换音乐
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
padding: 0;
/*margin: 0;*/
}
ul{
list-style: none
}
li{
border-bottom: 1px solid gray;
}
</style>
</head>
<body>
<div id="music">
<audio :src="currSong" autoplay="" controls="" @ended=‘nextSong‘></audio>
<ul>
<li v-for=‘(item,index) in songs‘ @click=‘clickHandler(index)‘>
<h3>歌名：{{item.name}}</h3>
<p>歌手：{{item.author}}</p>
</li>
</ul>
<button @click=‘addOneSong‘>添加一首歌</button>
</div>
<script type="text/javascript" src="vue.js"></script>
<script>
var songs = [
{id:1,src:‘./audios/1.mp3‘,name:"la la Land",author:‘Ryan‘},
{id:2,src:‘./audios/2.mp3‘,name:"The Best of",author:‘Skillof‘},
{id:3,src:‘./audios/3.mp3‘,name:"It My Life",author:‘Bon‘},
{id:4,src:‘./audios/4.mp3‘,name:"Tender",author:‘Blur‘}
]
var music = new Vue({
el:‘#music‘,
data:{
songs:songs,
currentIndex:0
},
methods:{
clickHandler(index){
// this.currentSong = this.songs[index].src;
this.currentIndex = index;
},
nextSong(){
// alert(1)
this.currentIndex++;
// this.currentSong = this.songs[this.currentIndex].src;
},
addOneSong(){
this.songs.push({id:5,src:‘./audios/4.mp3‘,name:"Tender",author:‘Blur‘});
}
},
computed:{
currSong(){
console.log(11111);
return this.songs[this.currentIndex].src;
}
},
created(){
//通常都来做页面的初始化
}
})
</script>
</body>
</html>
6：
原文地址：https://www.cnblogs.com/w-s-l123/p/9368122.html
时间： 2024-10-16 05:03:37