vue安装
# 最新稳定版本
$ npm install vue
# 最新稳定 CSP 兼容版本
$ npm install vue@csp
引包
cd /d/vue/demo
cnpm install vue@csp
$ ll node_modules/vue/dist/
total 1509
-rw-r--r-- 1 tanpengfei3 1049089 279 4月 27 2016 README.md
-rw-r--r-- 1 tanpengfei3 1049089 403335 9月 28 2016 vue.common.js
-rw-r--r-- 1 tanpengfei3 1049089 402783 9月 28 2016 vue.js
-rw-r--r-- 1 tanpengfei3 1049089 131766 9月 28 2016 vue.min.js
-rw-r--r-- 1 tanpengfei3 1049089 594279 9月 28 2016 vue.min.js.map
vue.min.js 压缩删减版
vue.js 完整版本
mkdir a01_v_newvue
mkdir -p static/js
cp ../node_modules/vue/dist/vue.js static/js/
index.html
<!DOCTYPE html>
<html>
<head>
<title>引包，el，模板，data, 插值</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="static/js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
template:`
<div>模板显示：{{msg}}</div>
`,
data:function(){
return {
msg: '数据'
}
}
});
</script>
</body>
</html>
页面显示
模板显示：数据
注意事项：vue 与 Vue 是不同的
常用指令
以数据驱动dom：将经常操作dom的js方法化为一系列元素标签
v-text: 元素文本innerText，必须是双标签，将内容解析为字符串文本
v-html: 元素标签innertHTML
v-if: 判断是否插入dom，append remove，相关指令 v-else-if v-else
v-show：判断是否隐藏 display:none
v-for: 数组index,item 对象key,value，也可以是item，value
<!DOCTYPE html>
<html>
<head>
<title>引包，el，模板，data, 插值</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="static/js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
template:`
<div>
<div v-text="mytext"></div>
<div v-html="myhtml"></div>
<div v-if="addButton">你看到我了</div>
<button v-if="num==11">11</button>
<button v-else-if="num==12">12</button>
<button v-show="cshow">v-show</button>
<ul>
<li v-for='item in arr_data'>
{{item}}
</li>
</ul>
<ul>
<li v-for='(index,item) in arr_data'>
{{index}}:{{item}}
</li>
</ul>
<ul>
<li v-for='(index,item) in arr_data'>
{{index}}:{{item}}
</li>
</ul>
<ul>
<li v-for='(key,value) in res'>
{{key}}:{{value}}
</li>
</ul>
</div>
`,
data:function(){
return {
mytext: '<h3>文本数据</h3>',
myhtml: '<h3>文本数据</h3>',
addButton: false,
num: 12,
cshow: false,
arr_data: ['天','地','君','亲','师'],
res: {data:"九千九百九十九朵...",action:"送你"}
}
}
});
</script>
</body>
</html>
<!--使用 v-cloak能够解决插值刷新闪烁问题-->
<p v-cloak>{{msg}}</p>
单双向数据流及事件绑定
单向绑定：内存改变时，自动触发页面渲染，从而让页面随之变化；v-bind，通用元素
双向绑定：内存与页面相互影响; v-model，只作用于有value属性的元素
事件绑定：v-on:事件名="表达式||函数名" 简写 @事件名="表达式||函数名"，事件名可原生或自定义
<div id="app"></div> <script type="text/javascript" src="static/js/vue.js"></script> <script type="text/javascript"> new Vue({ el:"#app", template:` <div> <input v-bind:value="name" :class="name"></input> <input type="text" v-model="name" v-bind:class="name"/> <button v-on:click="name='我点击了按钮'">变值</button> <button v-on:click="change">方法调用</button> </div> `, data:function(){ return { name: 'input_value' } }, methods:{ change: function(){ this.name = '方法 调用' } } }); </script>
IDE
https://download-cf.jetbrains.com/webstorm/WebStorm-2019.3.1.tar.gz