引入方式
构建环境
//引入CDN ? 内容分发网络 ? 提高网页加载数据 就近发送静态资源
字节跳动静态资源公共库
?
//创建vue.js 复制官方的vue.js 用webpack 打包
?
//创建项目选vue 只有hbuilder能用
?
?
//自己构建脚手架
?
//下载官方脚手架（一个文件夹里面只需要下一次就行）（主流）
vue create (项目名称)
?
//下载官方脚手架 可视化项目方式 vue ui
?
?
//HBuilder有的
?
?
npm下载指令
//下载到项目依赖中 以后项目上线时 这个模块的代码也在项目中起作用(vue jquery等)
npm i （）--save ? 是
npm i （） -S//--save的简写
?
//下载到项目依赖中 以后项目上线时 这个模块的代码不在项目中(webpack css-loader vue/cli等)
npm i （）--save-dev 是
npm i （）--D//--save-dev的简写
基础命令
v-html ? ? 加入内容 能识别标签
v-text ? ? 加入内容 ? 不能识别标签 不能拼接
v-pre ? 放弃基础命令 让插件表达式成为文本
v-cloak
//插入vue数据的时候会删除有该属性的标签，这个可以解决页面加载的时候先加载没有加入vue数据的原始代码，可以先给 v-cloak属性设置display:none 这样在加载vue当中的数据是重新渲染页面即可
<div id="app" v-cloak>
? ? ? ? <p>{{msg}}</p>
? ? </div>
? ? <script>
? ? ? ? let app = new Vue({
? ? ? ? ? ? el: "#app",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? msg: "cloak清除闪烁效果 ",
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
v-on
<div id="app">
? ? ? ? <input type="button" value="v-on指令" v-on:click="doit">
? ? ? ? <input type=utton" value="v-on指令简写" @click='doit'>
? ? ? ? <input type="button" value="双击事件" @dblclick='doit'>
? ? ? ? <h2 @dblclick='changesFoods'>{{food}}</h2>
? ? </div>
? ? <script>
? ? ? ? let app = new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? food: "米饭"
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? doit: function () {
? ? ? ? ? ? ? ? ? ? alert('hhh')
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? changesFoods: function () {
? ? ? ? ? ? ? ? ? ? // ?console.log(this.food);
? ? ? ? ? ? ? ? ? ? this.food += '很好吃'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }? })
? ? </script>
属性绑定
v-bind:属性 ? ? 简写 在属性前面加一个: ? 中间没有空格
样式绑定
1.class绑定
? ?//可以传给 `v-bind:class` 一个对象，以动态地切换 class
? ?<div id="app">
? ? ? ? <div v-bind:class="{box:flag}" style="width: 100px; height: 100px;">
? ? ? ? ? ? hello，Vue
? ? ? ? </div>
? ? </div>
? ? <script>
? ? ? ? let app = new Vue({
? ? ? ? ? ? el: "#app",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? flag: true,
? ? ? ? ? ? }
? ? ? ? });
? ? </script>
2.style绑定
//用 对象的方式，直接将具体样式绑定?
?<div id="app">
? ? ? ? <div :style="{color:color,fontSize:size}">
? ? ? ? ? ? hello，Vue
? ? ? ? </div>
? ? </div>
? ? <script>
? ? ? ? let app = new Vue({
? ? ? ? ? ? el: "#app",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? color: "blue",
? ? ? ? ? ? ? ? size: "60px"
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
|